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HTML/CSS 教程 


第 1 章 HTML5 概述 


学 习 要 点 : 
1.HTML5 的 历史 
2.HTML5 的 功能 
3.HTML5 的 特点 
4. 课 程 学 习 问 题 
主讲 教师 : 李 炎 恢 


HTML5 是 继 HTML4.01 和 XHTML1.0 之 后 的 超 文本 标记 语言 的 最 新 版 本 。 它 是 由 一 群 自由 
思想 者 组 成 的 团队 设计 出 来 ， 并 最 终 实现 多 媒体 支持 、 交 互 性 、 更 加 智能 的 表单 ， 以 及 更 好 
的 语义 化 标记 。 


HTML5 并 不 仅仅 是 HTML 规范 的 最 新 版 本 ， 而 是 一 系列 用 来 制作 现代 富 Web 内 容 的 相关 技 
术 的 总 称 ， 其 中 最 重要 的 三 项 技术 分 别 为 : HTML5 核心 规范 (标签 元 素 ) 、CSS ( 层 受 样式 
表 第 三 代 ) 、 和 JavaScript 。 


一 HTML5 的 历史 


1993 年 HTML 首次 以 因特网 草案 的 形式 发 布 ， 然 后 经 历 了 2.0、3.2 和 4.0， 直 到 1999 年 
的 HTML4.01 版 本 稳定 下 来 。 由 于 发 展 缓慢 ， 和 逐渐 的 被 更 加 严格 的 XHTML 取代。 


XHTML 的 兴衰 史 


自从 HTML4.01 版 本 之 后 ， 掌 握 着 HTML 规范 的 万 维 网 联盟 (W3C) 组 织 没 有 再 发 布 新 的 标 
准 ， 而 是 围绕 着 XHTML1.0 以 及 之 后 的 XHTML2.0 展开 工作 。XHTML 是 基于 XML、 和 致力 于 
实现 更 加 严格 并 且 统 一 的 编码 规范 的 HTML 版 本 ， 解 决 之 前 HTML4.01 版 本 时 ， 由 于 编码 不 

规范 导致 浏览 器 的 各 种 古怪 行为 。 所 以 ，Web 开发 者 对 XHTML 非常 的 拥护 。XHTML 极 大 的 
好 处 ， 就 是 强迫 开发 者 养 成 良好 的 编码 习惯 ， 放 育 HTML 的 凌乱 写法 ， 最 终 降 低 了 浏览 器 解 

析 页 面 的 难度 ， 方 便 移植 到 更 多 平台 。 


可 是 ， 越 是 想 往 好 的 方面 发 展 ， 往 往 可 能 是 带 来 的 却 是 毁灭 性 的 灾难 ， 世 间 万 物 就 是 如 此 。 
XHTML2.0 规范 了 更 严格 的 错误 处 理 规 则 ， 强 制 要 求 浏览 器 拒绝 无 效 的 XHTML2 页 面 ， 强 制 
Web 开发 者 写 出 绝对 正确 规范 的 代码 ， 同 时 不 得 向 下 兼容 ， 握 弃 HTML 遗留 的 怪异 行为 和 编 
码 习 惯 。 按 理 说 ， 取 其 精华 、 合 其 粮 粕 应 该 是 好 事 。 但 是 ， 这 样 的 话 ， 数 亿 的 页 面 将 无 法 兼 
容 ，Web 开发 者 的 难度 又 被 加 大 ， 并 且 制 定 这 个 标准 又 太 过 久远 ， 最 终 被 抛弃 。 


HTML5 的 回电 


2008 年 W3C 发 布 了 HTML5 的 工作 草案 ，2009 年 停止 了 XHTML2 计划 。 又 过 去 大 概 一 
年 ，HTML5 规范 进一步 解决 了 诸多 非常 实际 的 问题 ， 各 大 浏览 器 厂商 开始 对 旗下 的 产品 进 
行 升级 ， 以 便 支 持 HTML5。 这 样 ， 得 益 于 浏览 器 的 实验 反馈 ，HTML5 规范 得 到 了 持续 的 进 
步 和 完善 ， 从 而 迅速 融入 到 Web 平台 的 实质 性 改进 中 。 


和 XHTML2.0 不 同 ， 制 定 HTML5 规范 的 一 群 人 并 不 想 挑 出 以 往 HTML 的 各 种 毛病 为 其 改 
正 ， 而 是 尽 可 能 的 补 会 Web 开发 者 急需 的 各 各 功能。 这些 功 能 包括 更 强大 的 CSS3、 表 单 验 
音频 视频 、 本 地 存储 、 地 理 定 位 、 绘 画 (Canvas) 、Web 通信 等 等 。 


二 . HTML5 的 功能 
HTML5 到 底 涵 盖 了 哪些 功能 ?这些 功能 到 底 在 主流 的 浏览 器 支持 情况 如 何 ? 


1.HTML5 核心 : 这 部 分 主要 由 W3C 官方 的 规范 组 成 ， 涉 及 新 的 语义 元 素 、 新 的 增强 的 Web 
表单 、 音 频 和 视频 、 以 及 通过 JavaScript 绘图 的 Canvas。 这 部 分 大 多 数 主 流 浏览 器 均 得 到 很 
好 的 支持 ; 


2. 曾 经 的 HTML5 标准 : 这 部 分 主要 来 自 于 最 初 制定 的 HTML5 规范 ， 其 中 大 多 数 功 能 需要 
JavaScript 且 支 持 富 Web 应 用 开发 。 比 如 : 本 地 数据 存储 、 离 线 应 用 和 消息 传递 ; 3. 非 
HTML5 标准 : 这 部 分 通常 指 下 一 代 功能 ， 虽 然 从 未 进 入 HTML5 标准 ， 但 人 们 还 是 会 把 它 认 
做 HTML5 的 一 部 分 。 这 些 包 括 最 为 常见 的 CSS3， 以 及 很 热门 的 地 理 定位 。 


对 于 最 为 常用 且 实 用 的 部 分 ， 基 本 上 主流 的 浏览 器 都 支持 的 比较 好 。 而 那些 特殊 需求 的 部 
分 ， 则 需要 根据 不 同 的 浏览 器 检测 才能 知道 是 否 支 持 自己 想 要 的 功能 。 


三 . HTML5 的 特点 


在 HTML5 发 展 的 同时 ，XHTML2.0 也 在 不 断 发 展 ， 那么 到 底 是 哪些 特点 导致 HTML5 取得 最 
终 的 胜利 呢 ? 


1. 向 下 兼容 


对 于 XHTML2.0 要 求 遵 循 规 则 ， 和 否则 不 予 显 示 的 方式 ，HTML5 却 实行 “不 破坏 Web” 的 原 
则 。 也 就 是 说 ， 以 往 已 存在 的 Web 页 面 ， 还 可 以 保持 正确 的 显示 。 


当然 ， 面 对 开发 者 ，HTML5 规范 要 求 担 弃 过 去 那些 编码 坏 习 惯 和 废弃 的 标签 元 素 ; 而 面 对 浏 
览 器 厂商 ， 要 求 它们 兼容 HTML 遗留 的 一 切 ， 以 做 到 向 下 兼容 。 


2. 用 户 至 上 


HTML5 遵循 “用 户 至 上 ?的 原则 ， 在 出 现 具体 问题 时 ， 会 把 用 户 放 在 第 一 位 ， 其 次 是 开发 者 ， 
然后 是 浏览 器 厂商 ， 最 后 才 是 规范 制定 者 。 比 如 ， 开 发 者 在 编码 时 不 严谨 导致 本 该 出 现 警 告 
或 错误 时 ， 却 正常 显示 了 页 面 。 


3. 化 繁 为 简 


HTML5 对 比 之 前 的 XHTML， 做 了 大 量 的 简化 工作 。 具 体 如 下 : 


( 们 .以 浏览 器 的 原生 能 力 代 替 复 杂 的 JavaScript ; 
(2).DOCTYPE 被 简化 到 极致 ; 

(3). 字 符 集 声明 被 简化 ; 

(4). 简 单 强大 的 API。 

4. 无 插件 范式 


在 HTML5 出 现 之 前 ， 很 多 功能 只 能 通过 插件 或 hack (如 绘图 API) 来 实现 ， 但 HTML5 原 生 
提供 了 这 些 支持 。 wo 


(1). 插 件 安装 容易 失败 ; 
(2). 插 件 被 浏览 器 或 软件 禁用 屏蔽 〈 如 Flash 插件 ) 

(3). 插 件 经 常会 被 爆 出 漏洞 被 利用 攻击 ; 

(4). 插 件 不 容易 与 HTML 文档 其 他 部 分 集成 ( 比如 整体 透明 化 等 ) 。 

5. 访 问 通 用 性 

这 个 原则 分 为 三 个 概念 : 

( 们 .可 访问 性 : 比如 更 加 利于 残障 人 士 的 阅读 方案 ; 

(2). 媒 体 中 立 : 比如 HTML5 的 媒体 播放 在 不 同 设备 或 平台 均 能 正常 运行 ; 
(3). 支 持 所 有 语种 : 比如 新 元 素 <ruby> 。 

6. 引 入 语义 


HTML5 引入 了 一 些 用 来 区 分 不 同 含义 和 内 容 的 标记 元 素 。 这 种 方式 极 大 的 提供 的 编码 人 员 的 
可 读 性 和 代码 区 域 查询 的 便利 性 。 


7. 引 入 原生 媒体 支持 


HTML5 的 一 次 大 改进 救生 衣 支 持 在 浏览 器 中 直接 播放 视频 和 音频 文件 ， 以 前 都 需要 借助 插件 
才能 实现 此 类 功能 。 


8. 引 入 可 编程 内 容 


HTML5 最 大 的 变化 就 是 引入 了 需要 通过 JavaScript 编程 才能 完全 的 各 种 效果 ， 而 这 些 很 多 
都 是 HTML5 原生 的 。 那 么 现在 HTML5 可 以 理解 为 HTML + CSS + JavaScript 的 总 称 。 


四 .课程 学 习 问 题 
学 习 HTML5 需要 一 些 测试 用 的 浏览 器 、 编 码 用 的 开发 工具 、 以 及 建议 推荐 的 学 习 方 法 。 


1. 浏 览 器 选择 


IE9+ 

Firefox 3.5+ 
Chrome 3.0+ 
Safari 3.0+ 
Opera 10.5+ 


这 里 重点 要 说 明 一 下 IE 浏览 器 。 由 于 历史 和 系统 绑 定 原因 ， 还 有 相当 一 部 分 电脑 残留 IE9 以 
下 版 本 的 浏览 器 。 虽 然 微 软 已 经 开始 发 表 声 明 逐 步 不 再 维护 IE8， 但 这 部 分 群体 还 占有 一 定 的 
份额 。 所 以 ， 是 要 迎合 这 部 分 用 户 ， 取 决 于 个 人 对 市 场 的 判断 和 成 本 的 考量 。 


2. 开 发 工具 


本 课程 我 们 使 用 Sublime Text3 作为 HTML5 课程 的 编码 工具 。 使 用 了 Soda Dark 3 作为 软件 
界面 的 主题 。 


3. 学 习 方 式 


本 课程 原则 上 是 零 基 础 、 初 学 者 可 学 ， 但 如 果 你 已 经 有 XHTML 课程 基础 ， 那 么 学 习 起 来 将 非 
常 轻松 。 当 然 ， 虽 然 我 们 已 经 录制 了 XHTML 基础 ， 在 录制 HTML5 课程 时 ， 还 是 将 所 有 学 员 
当 作 刚 接触 的 初学 者 来 对 待 。 再 当然 ， 这 里 所 说 的 零 基础 和 初学 者 也 是 需要 一 定 经 验 ， 因 为 
长 期 的 教学 工作 ， 我 们 接触 到 很 多 连 QQ 不 会 用 、 邮 件 不 会 发 送 、 迅 雷 不 会 下 载 的 学 员 。 这 
些 学 员 是 初学 者 之 前 的 、 负 基础 的 学 员 ， 所 以 ， 如 果 是 初学 者 一 般 问 题 不 大 。 


第 2 草 基本 格式 


学 习 要 点 : 
1.HTML5 文档 结构 
2. 文 档 结 构 解析 
3. 元 素 标 签 探讨 
主讲 教师 : 李 炎 恢 


本 章 主要 先 从 HTML5 的 文档 结构 谈 起 。 这 些 基础 元 素 确 定 了 HTML 文档 的 轮廓 以 及 浏览 器 
的 初始 环境 。 几 乎 所 有 页 面 都 必须 首先 键入 这 些 元 素 。 


一 * HTML5 文档 结构 
1. 第 一 步 : 打开 Sublime Text 3， 打 开 指 定 文件 夹 ; 
2. 第 二 步 : 保存 index.html 文件 到 磁盘 中 ，.html 是 网 页 后 级 ; 
3. 第 三 步 : 开始 编写 HTML5 的 基本 格式 。 

<!DOCTYPE html> // 文 档 类 型 声明 <html lang="zh-cn"> // 表 示 HTML 文档 开始 <head> // 包 含 文档 元 数据 
Mi | 
二 :文档 结构 解析 





1.Doctype 


文档 类 型 声明 (Document Type Declaration， 也 称 Doctype ) 。 它 主要 告诉 浏览 器 所 查看 的 
文件 类 型 。 在 以 往 的 HTML4.01 和 XHTML1.0 中 ， 它 表示 具体 的 HTML 版 本 和 风格 。 而 如 
今 HTML5 不 需要 表示 版 本 和 风格 了 。 


<IDOCTYPE html> // 不 分 区 大 小 写 


2.html 元 素 


首先 ， 元 素 就 是 标签 的 意思 ，html 元 素 即 html 标签 。html 元 素 是 文档 开始 和 结尾 的 元 素 。 它 
是 一 个 双 标 签 ， 头 尾 呼应 ， 包 含 内容 。 这 个 元 素 有 一 个 属性 和 值 : lang="zh-cn"， 表 示 文 档 采 
用 语言 为 : 简体 中 文 。 


日 4 -> 


<html lang="zh-cn"> // 如 果 是 美文 则 为 en 


3.head 元 素 


用 来 包含 元 数据 内 容 ， 元 数据 包括 : <link>、<meta>、<noscript>、<script>、<style>、 
<title>。 这 些 内 容 用 来 浏览 器 提供 信息 ， 比 如 link 提供 CSS 信息 ，script 提 供 JavaScript 信 
息 ，title 提供 页 面 标题 等 。 


<head>...</head> // 这 些 信息 在 页 面 不 可 见 


4.meta 元 素 


这 个 元 素 用 来 提供 关于 文档 的 信息 ， 起 始 结构 有 一 个 属性 为 : charset="utf8"。 表 示 告 诉 浏览 
器 页 面 采 用 的 什么 编码 ， 一 般 来 说 我 们 就 用 utf8。 当 然 ， 文 件 保 存 的 时 候 也 是 utf8， 而 浏览 器 
也 设置 utf8 即 可 正确 显示 中 文 。 


<meta charset="utf-8"> // 除 了 设置 编码 ， 还 有 别 的 


5.title 元 素 


这 个 元 素 很 简单 ， 顾 名 思 义 : 设置 浏览 器 左上 角 的 标题 。 


<title> 基 本 结构 </title> 


6.body 元 素 
用 来 包含 文档 内 容 的 元 素 ， 也 就 是 浏览 器 可 见 区 域 部 分 。 所 有 的 可 见 内 容 ， 都 应 该 在 这 个 元 
素 内 部 进行 添加 。 


<body>.. .</body> 


7.a 元 素 


一 个 超 链接 ， 后 面 会 详细 探讨 。 


<a href="http://www.baidu.com"> 百 度 </a> 


三 .元 素 标 签 探讨 

HTML 是 一 种 标记 语言 ， 刚 才 的 结构 我 们 已 经 详细 探讨 过 。 这 里 ， 我 们 再 剖析 一 下 这 些 “ 标 
记 ? 或 者 叫 "“ 标 签 "， 书 面 上 经 常 称 作 为 "元素 ”的 东西 是 怎么 构成 的 。 

1. 元 素 


元 素 就 是 一 组 告诉 浏览 器 如 何 处 理 一 些 内容 的 标签 。 每 个 元 素 都 有 一 个 关键 字 ， 比 如 
<body>、<title>、<meta> 都 是 元 素 。 不 同 的 标签 名 称 代 表 不 同 的 意义 ， 后 面 将 会 涉及 到 段落 
标签 、 文 本 标签 、 链 接 标 签 、 图 片 标签 等 。 


元 素 一 般 分 为 两 种 : 单 标签 ( 空 元 素 ) 和 双 标 签 。 单 标签 一 般 用 于 声明 或 者 插入 某 个 元 素 ， 
比如 声明 字符 编码 就 用 <meta>， 插 入 图 片 就 用 <img> ; 双 标 签 一 般 用 于 设置 一 段 区 域 的 内 
容 ， 将 其 包含 起 来 ， 比 如 段落 <p>...</p>。 


2. 属 性 和 值 


元 素 除了 有 单 双 之 分 ， 元 素 的 内 部 还 可 以 设置 属性 和 值 。 这 些 属性 值 用 来 改变 元 素 某 些 方面 
的 行为 。 比 如 超 链接 : <a> 中 的 href 属性 ， 里 面 替换 网 址 即 可 链接 到 不 同 的 网 站 。 当 然 一 个 
元 素 里 面 可 以 设置 多 个 属性 ， 其 至 自 定 义 属 性 。 


第 3 章 文 本 元 素 

学 习 要 点 : 

1. 文 本 元 素 总 汇 

2. 文 本 元 素 解 析 

主讲 教师 : 李 炎 恢 

本 章 主要 探讨 HTML5 中 的 文本 元 素 ， 所 谓 文本 元 素 ， 就 是 将 一 段 文本 设置 成 相 匹配 的 结构 和 
含义 。 

一 文本 元 素 总 汇 


HTML5 规范 指出 : 使 用 元 素 应 该 完全 从 元 素 的 语义 出 发 。 但 是 由 于 历史 遗留 及 用 户 至 上 的 原 


则 ， 这 种 语义 会 宽松 许多 。 


元 素 名 称 说 明 


a 生成 超 链 接 

br 强制 换行 

wbr 可 安全 换行 

b 标记 一 段 文字 但 不 强调 

Strong 表示 重要 

i 表示 外 文 或 科学 术语 

em 表示 强调 

code 表示 计算 机 代码 

var 表示 程序 输出 

samp 表示 变量 

kdb 表示 用 户 输入 

abbr 表示 缩写 

cite 表示 其 他 作品 的 标题 

del 表示 被 删除 的 文字 

S 表示 文字 已 不 再 确认 

dfn 表示 术语 定义 

mark 表示 与 另 一 段 上 下 文 有 关 的 内 容 
q 表示 引 自 他 处 的 内 容 

rp 与 ruby 元 素 结合 使 用 ， 标 记 括 号 
rt 与 ruby 元 素 结合 使 用 ， 标 记 括 号 
ruby 表示 位 于 表意 文字 上 方 或 右 方 的 注音 符号 
bdo 控制 文字 的 方向 

small 表示 小 号 字体 内 容 

sub 表示 下 标 字 体 

sup 表示 上 标 字 体 

time 表示 时 间或 日 期 

U 标记 一 段 文字 但 不 强调 

span 通用 元 素 ， 没 有 任何 语义 。 一 般配 合 CSS 修饰 。 


从 上 面 这 张 表格 中 ， 我 们 发 现 文 本 元 素 还 是 非常 多 的 。 但 实际 上 ， 在 现实 应 用 中 ， 站 正 常用 
的 也 就 是 那么 几 个 ， 绝 大 部 分 是 针对 英文 的 。 


1.<b> 表 示 关 键 字 和 产品 名 称 


<b>HTML5</b> 


解释 : <b> 元 素 实际 作用 就 是 加 粗 。 从 语义 上 来 看 ， 就 是 标记 一 段 文字 ， 但 并 不 是 特别 强调 或 
重要 性 。 比 如 : 一 段 文本 中 的 菜 些 关键 字 或 者 产品 的 名 称 。 


2.<strong> 表 示 重 要 的 文字 


<strong>HTML5</strong> 


解释 : <strong> 元 素 实际 作用 和 <b> 一 样 ， 就 是 加 粗 。 从 语义 上 来 看 ， 就 是 强调 一 段 重 要 的 文 
本 。 


3.<br> 强 制 换 行 、<wbr> 安 全 换行 


<br> Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple. 


解释 : 在 任意 文本 位 置 键入 <br> 都 会 被 换行 ， 而 在 英文 单词 过 长 时 使 用 <wbr> 会 根据 浏览 器 的 
宽度 适当 的 裁 切 换行 。 


4.<i> 表 示 外 文 词 汇 或 科技 术语 


<i>HTML5</i> 


解释 : <i> 元 素 实际 作用 就 是 倾斜 。 从 语义 上 来 看 ， 表 示 区 分 周转 内容， 并 不 是 特别 强调 或 重 
要 性 。 


5.<em> 加 以 强调 


<em>HTML5</em> 


解释 : <em> 元 素 实际 作用 和 <i> 一 样 ， 就 是 倾斜 ; 从 语义 上 来 看 ， 表 示 对 一 段 文本 的 强调 。 


6.<s> 表 示 不 准确 或 校正 


<s>HTML5</s> 


解释 : <s> 元 素 实际 作用 就 是 删除 线 ; 从 语义 上 来 看 ， 表 示 不 准确 的 删除 。 


7.<del> 表 示 删 除 文字 


<del>HTML5</del> 


解释 : <del> 元 素 实 际 作 用 和 <S> 一 样 ， 就 是 删除 线 ; 从 语义 上 来 看 ， 表 示 删 除 相 关 文 字 。 


8.<uU> 表 示 给 文字 加 上 下 划 线 


<U>HTML5</u> 


解释 : <u> 元 素 实 际 作 用 就 是 加 一 条 下 划 线 ; 从 语义 上 来 看 ， 并 不 强调 此 段 文本 。 
9.<ins> 添 加 一 段 文本 

<ins>HTML5</ins> 
解释 : <ins> 元 素 实 际 作 用 和 <U> 一 样 ， 加 一 条 下 划 线 ; 从 语义 上 来 看 ， 是 添加 一 段 文本 ， 起 
到 强调 的 作用 。 


10.<small> 添 加 小 号 字体 
<small>HTML5</small> 
解释 : <small> 元 素 实 际 作用 就 是 将 文本 放 小 一 号 。 从 语义 上 来 看 ， 用 于 免责 声明 和 澄清 声 
明 。 
11.<sub><sup> 添 加 上 标 和 下 标 


<sub>5</sub> 


<sup>5</sup> 


解释 : <sub> 和 <sup> 元 素 实际 作用 就 是 数学 的 上 标 和 下 标 。 语 义 也 是 如 此 。 


12.<code> 等 表示 输入 和 输出 


<code>HTML5</code> 
<var>HTML5</var> 
<samp>HTML5</samp> 


<kdb>HTML5</kdb> 


解释 : <code> 表 示 计 算 机 代码 片段 ; <var> 表 示 编 程 语言 中 的 变量 ; <samp> 表 示 程 序 或 计算 
机 的 输出 ; <kdb> 表 示 用 户 的 输入 。 由 于 这 属于 英文 范畴 的 ， 必 须 将 lang="en" 英 语 才 能 体现 
效果 。 


13.<abbr> 表 示 缩 写 

<abbr>HTML5</abbr> 
解释 : <abbr> 元 素 没有 实际 作用 ; 从 语义 上 看 ， 是 一 段 文本 的 缩写 。 
14.<dfn> 表 示 定 义 术 语 

<dfn>HTML5</dfn> 
解释 : <dfn> 元 素 就 是 一 般 性 的 倾斜 ; 从 语义 上 看 ， 表 示 解 释 一 个 词 或 短语 的 一 段 文本 。 
15.<q> 引 用 来 自 他 处 的 内 容 


<q>HTML5</q> 


解释 : <q> 元 素 实 际 作用 就 是 加 了 一 对 双 引 号 。 从 语义 上 来 看 ， 表 示 引 用 来 自 其 他 地 方 的 内 


16.<cite> 引 用 其 他 作品 的 标题 

<cite>HTML5</cite> 

解释 : <cite> 元 素 实际 作用 就 是 加 粗 。 从 语义 上 来 看 ， 表 示 引 用 其 他 作品 的 标题 。 
17.<ruby> 语 言 元 素 


<ruby> 区 <rp>(</rp><rt>tao</rt><rp>)</rp> 长 <rp>(</rp><rt>tie</rt><rp>)</rp> </ruby> 


解释 : <ruby> 用 来 为 非 西 方 语言 提供 支持 。<rp><rt> 用 来 帮助 读者 掌握 表意 语言 文字 正确 发 
音 。 比 如 : 汉语 拼音 在 文字 的 上 方 。 但 目前 Firefox 还 不 支持 此 特性 。 
18.<bdo> 设 置 文字 方向 

<bdo dir="rt1l">HTML5</bdo> 
解释 : <bdo> 必 须 使 用 属性 dir 才 可 以 设置 ， 一 共 两 个 值 : tt (从 右 到 左 ) 和 Itr (从 左 到 


右 ) 。 一 般 默 认 是 ltr。 还 有 一 个 <bdi> 元 素 也 是 处 理 方向 的 ， 由 于 是 特殊 语言 的 特殊 效果 ， 且 
主流 浏览 器 大 半 不 支持 ， 和 忽略。 


19.<mark> 突 出 显示 文本 


<mark>HTML5</mark> 


解释 : <mark> 实 际 作用 就 是 加 上 一 个 黄色 的 背景 ， 黑 色 的 字 ; 从 语义 上 来 看 ， 与 上 下 文 相关 
而 突出 的 文本 ， 用 于 记号 。 


20.<time> 表 示 日 期 和 时 间 

<time>2015-10-10</time> 
解释 : <time> 元 素 没有 实际 作用 ; 从 语义 上 来 看 ， 表 示 日 期 和 时 间 。 
21.<span> 表 示 一 般 性 文本 


<span>HTML5</span> 


解释 : <span> 元 素 没 有 实际 作用 ; 语义 上 就 是 表示 一 段 文本 ， 我 们 经 常用 它 来 设置 CSS 等 
操作 。 


第 4 章 超 链接 和 路 径 


学 习 要 点 : 

1. 超 链接 的 属性 

2. 相 对 与 绝对 路 径 

3. 销 点 设置 

主讲 教师 : 李 炎 恢 

本 章 主要 探讨 HTML5 中 文本 元 素 最 重要 的 一 个 超 链接 ， 探 讨 它 自 身 的 属性 以 及 路 径 问 题 。 
一 . 超 链接 的 属性 


<a> 元 素 属 于 文本 元 素 ， 有 一 些 私 有 属性 或 者 叫 局 部 属性 。 那 么 ， 相 对 应 的 还 有 通用 属性 或 叫 
做 全 局 属性 。 这 方面 的 知识 ， 后 面 会 详细 探讨 。 


属性 名 称 说 明 
href 指定 <a> 元 素 所 指 资源 的 URL 
hreflang 指向 的 链接 资源 所 使 用 的 语言 
media 说 明 所 链接 资源 用 于 哪 种 设备 
rel 说 明文 档 与 所 链接 资源 的 关系 类 型 
target 指定 用 以 打开 所 链接 资源 的 浏览 环境 
type 说 明 所 链接 资源 的 MIME 类 型 (比如 text/html) 


在 这 几 个 属性 当中 ， 只 有 href 和 target 一 般 比较 常用 ， 而 href 是 必须 要 用 的 。 其 他 几 个 属 
性 ， 在 <a> 元 素 使 用 较 少 ， 将 在 CSS 章节 再 探讨 。 


1.href 属性 
<a href="http://www.baidu.com"> 百 度 </a> 
解释 : href 是 必须 属性 ， 否 则 <a> 元 素 就 变 成 空 元 素 了 。 如 果 属 性 值 是 http:// 开 头 的 URL， 意 
味 着 点 击 跳 转 到 指定 的 外 部 网 站 。 
2.target 属性 


<a href="http://www.baidu.com" target="_blank"> 百 度 </a> 


解释 : target 属性 告诉 浏览 器 希望 将 所 链接 的 资源 显示 在 哪里 。 


属性 名 称 说 明 


_blank 在 新 窗口 或 标签 页 中 打开 文档 
_parent 在 父 窗 框 组 (frameset) 中 打开 文档 
_Sself 在 当前 窗口 打开 文档 (默认 ) 

_top 在 顶层 窗口 打开 文档 


二 .相对 与 绝对 路 径 


所 谓 相 对 路 径 ， 就 是 相对 于 链接 页 面 而 言 的 另 一 个 页 面 的 路 径 。 而 绝对 路 径 ， 就 是 直接 从 
file:/// 磁 盘 符 开始 的 完整 路 径 。 我 们 在 同一 个 目录 下 做 上 两 个 页 面 ， 其 中 一 个 页 面 链接 到 另 一 
个 页 面 。 


1. 绝 对 路 径 


<a href="file:///D:/ 备 课 /HTML5 第 一 季 /code/index2.html">index2</a> 


解释 : 首先 是 file:/// 开 头 ， 然 后 是 磁盘 符 ， 然 后 是 一 个 个 的 目录 层次 ， 找 到 相应 文件 。 这 种 方 
式 最 致命 的 问题 是 ， 当 整个 目录 转移 到 另外 的 瘟 符 或 其 他 电脑 时 ， 目 录 结 构 一 旦 出 现任 何 变 
化 ， 链 接 当 即 失 效 。 


2. 相 对 路 径 


<a href="index2.html">index2</a> 


解释 : 相对 路 径 的 条 件 是 必须 文件 都 在 一 个 磁盘 或 目录 下 ， 如 果 是 在 同一 个 目录 下 ， 直 接 属 
性 值 就 是 被 链接 的 文件 名 .后 级 名 。 如 果 在 同一 个 主 目录 下 ， 有 多 个 子 目 录 层 次 ， 那 就 需要 使 
用 目录 结构 语法 。 


3. 目 录 语 法 

同一 个 目录 : index2.html 或 .index2.html ; 
在 子 目录 : xxx/index2.html ; 

在 孙子 目录 : xxx/xxx/index2.html ; 

在 父 目 录 : .index2.html ; 


在 爷爷 目录 : ../../index2.html; 


三 ， 锚 点 设置 


超 链 接 也 可 用 来 将 同一 个 文档 中 的 另 一 个 元 素 移入 视野 。 通 过 属性 id 或 name 实现 销 点 定 


位 。 
// 链 接 


<a href="#1"> 第 一 章 </a> 

<a href="#2"> 第 二 章 </a> 

<a href="#3"> 第 三 章 </a> // 锚 点 

&lt;a name="1"&gt;&lt;/a&gt;&lt;a id="3"&gt;&lt;/aggt; 


主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 分 组 元 素 的 用 法 。 所 谓 分 组 ， 就 是 用 来 组 织 相 关内 容 的 HTML5 元 
素 ， 清 晰 有 效 的 进行 归 类 。 


一 ， 分 组 元 素 总 汇 为 了 页 面 的 排版 需要 ，HTML5 提供 了 几 种 语义 的 分 组 元 素 。 


元 素 名 称 说 明 

p 表示 段落 

div 一 个 没有 任何 语义 的 通用 元 素 ， 和 span 是 对 应 元 素 
blockquote ”表示 引 自 他 出 的 大 段 内 容 

pre 表示 其 格式 应 被 保留 的 内 容 

hr 表示 段落 级 别 的 主题 转换 ， 即 水 平 线 

ul,ol 表示 无 序列 表 ， 有 序列 表 


li 用 于 ul,ol 元 素 中 的 列表 项 


表示 包含 一 系列 术语 和 定义 说 明 的 列表 。dt 在 dl 内 部 表示 术语 ， 一 般 充 当 
标题 ; dd 在 dl 内 部 表示 定义 ， 一 般 是 内 容 。 


figure 表示 图 片 
figcaption 表示 figure 元 素 的 标题 


dl,dt,dd 


<p> 这 是 一 个 段落 </p> 
<p> 这 也 是 一 个 段落 </p> 


解释 : <p> 元 素 实际 作用 就 是 将 内 部 包含 的 文本 形成 一 个 段落 ; 而 段落 和 段落 之 间 保 持 一 定量 
的 空 障 。 


2.<div> 通 用 分 组 


<div> 这 是 一 个 通用 分 组 </div> 
<div> 这 是 又 一 个 通用 分 组 </div> 


解释 : <div> 元 素 在 早期 的 版 本 中 非常 常用 ， 通 过 <div> 这 种 一 般 性 


而 在 HTML5 中 ， 由 于 语义 的 缘故 ， 被 其 他 各 种 文档 元 素 所 代替 。 
段 文本 的 上 下 空 障 是 没有 的 ， 空 障 间 隔 和 <br> 换 行 一 样 。 


3.<blockquote> 引 用 大 段 他 出 内 容 


<blockquote> 这 是 一 个 大 段 引 自 他 出 内 容 </blockquote> 
<blockquote> 这 是 另 一 个 大 段 引 自 他 出 内 容 </blockquote> 


解释 : <blockquote> 元 素 实 际 作用 除了 和 <p> 元 素 一 样 ， 有 段落 
进 的 功能 。 语 义 上 表示 ， 大 段 的 引用 他 出 的 内 容 。 


4.<pre> 展 现 格 式 化 内 容 


<pre> ##### 
####### 
###### 
######## 


##### </pre> 


元 素 进行 布局 。 


和 <p> 段 落 的 区 别 就 是 ， 两 


空 际 的 功能 ， 还 包含 了 首尾 缩 


解释 : <pre> 元 素 实际 作用 就 是 编辑 器 怎么 排版 的 ， 原 封 不 动 的 展现 出 来 。 当 然 ， 这 种 只 适合 


简单 的 排版 ， 复 杂 的 排版 就 无 法 满足 要 求 了 。 


5.<hr> 添 加 分 隔 


<hr> 


解释 : <hr> 元 素 实际 作用 就 是 添加 一 条 分 割 线 ， 意 图 呈现 上 下 文 主题 的 分 割 。 


6.<Ul><li> 添 加 无 序列 表 


<ul> 
/> 
<1i> 李 四 </1i> 
cl /A> 
<1i> 马 六 </1i> 
</ul> 


解释 : <ul> 元 素 表 示 无 序列 表 ， 而 <|i> 元 素 则 是 内 部 的 列表 项 。 


7.<ol><li> 添 加 有 序列 表 


<ol> 
< > > 
9] 个 /> 
ll /> 
<1i> 马 六 </1i> 
</O1> 


解释 : <ol> 元 素 表示 有 序列 表 ， 而 <li> 元 素 则 是 内 部 的 列表 项 。<ol> 元 素 目 前 支持 三 种 属性 


Ol 元素 属性 
属性 名 称 说 明 
start 从 第 几 个 序列 开始 统计 : <ol start="2"> 
reversed 是 否 倒 序 排列 : <ol reversed>， 一半 主流 浏览 器 不 支持 
type 表示 列表 的 编号 类 型 ， 值 分 别 为 :1~、a、A、i、| 
li 元 素 属性 
属性 名 称 说 明 
value 强行 设置 某 个 项 目的 编号 。 


<11 value="7"> 王 五 </1i> 


8.<dl><dt><dd> 生 成 说 明 列 表 


<dl> 
<dt> 这 是 一 份 文件 </dt> 
<dd> 这 里 是 这 份 文件 的 详细 内 容 1 </dd> 
<dd> 这 里 是 这 份 文件 的 详细 内 容 2 </dd> 
</dl> 


解释 : 这 三 个 元 素 是 一 个 整体 ， 但 <dt> 或 <dd> 并 非 都 必须 出 现 。 
9.<figure><figcaption> 使 用 插图 


<figure> 
<figcaption> 这 是 一 张 图 </figcaption> 
<img src="img.png"> 

</figure> 


解释 : 这 两 个 元 素 一 般 用 于 图 片 的 布局 。 


第 6 章 表格 元 素 


学 习 要 点 : 
1. 表 格 元 素 总 汇 
2. 构 建 表 格 解析 


主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 表格 元 素 的 用 法 。 表 格 的 主要 用 途 是 以 网 格 的 形式 显示 二 维 数据 。 


一 .表格 元 素 总 汇 


表格 的 基本 构成 最 少 需要 三 个 元 素 : 


元 素 名 称 


col 
colgroup 


caption 


二 : 构建 表格 解析 


1.<table><tr><td> 构 建 基础 表格 


<table border="1"> 
<tr> 
<td> 张 三 </td> 
<td> 男 </td> 
<td> 未 婚 </td> 
</tr> 
“E> 
<td> 李 四 </td> 
<td> 女 </td> 
<td> 已 婚 </td> 
</tr> 
</table> 


<table>、<tr>、<td>， 其 他 的 一 些 作 为 可 选 辅助 存在 。 
说 明 

表示 表格 

表示 标题 行 

表示 表格 主体 

表示 表 脚 


表示 表格 标题 


解释 : <table> 元 素 表 示 一 个 表格 的 声明 ，<tr> 元 素 表示 表格 的 一 行 ，<td> 元 素 表 示 一 个 单元 
格 。 默 认 情 况 下 表格 是 没有 边框 的 ， 所 以 ， 在 <table> 元 素 增加 一 个 border 属性 ， 设 置 为 1 即 


可 显示 边框 。 


2.<th> 为 表格 添加 标题 单元 格 


<table border="1" style="width:300px;"> 
<tr> 
<th> 姓 名 </th> 
<th> 性 别 </th> 
<th> 婚 姻 </th> 
</tr> 
二 人 
<td> 张 三 </td> 
<td> 男 </td> 
<td> 未 婚 </td> 
</tr> 
<tr> 
<td> 李 四 </td> 
<td> 女 </td> 
<td> 已 婚 </td> 
</tr> 
</table> 


解释 : <th> 元 素 主要 是 添加 标题 行 的 单元 格 ， 实 际 作用 就 是 将 内 部 文字 居中 且 加 粗 。 这 里 使 
用 了 一 个 通用 属性 style， 主 要 用 于 CSS 样式 设置 ， 以 后 会 涉及 到 。<th><td> 均 属于 单元 


格 ， 包 含 两 个 合并 属性 : colspan、rowspan 等 。 


3.<thead> 添 加 表 头 


<thead> 
< ET 
<th> 姓 名 </th> 
<th> 性 别 </th> 
<th> 婚 姻 </th> 
</tr> 
</thead> 


解释 : <thead> 元 素 就 是 限制 和 规范 了 表格 的 表 头 部 分 。 尤 其 是 以 后 动态 生成 表 


是 不 国定 的 ， 使 用 此 元 素 可 以 限定 在 开头 位 置 。 


4.<tfoot> 添 加 表 脚 
<tfoot> 
让 这 
<td colspan="3"> 统 计 : 共 两 名 </td> 
</tr> 
</tfoot> 


解释 : <tfoot> 元 素 为 表格 生成 表 脚 ， 限 制 在 表格 的 底部 。 


5.<tbody> 添 加 表 主 体 


<tbody> 
<tr> 
<td> 张 三 </td> 
<td> 男 </td> 
<td> 未 婚 </td> 
</tr> 
<tr> 
<td> 李 四 </td> 
<td> 女 </td> 
<td> 已 婚 </td> 
</tr> 
</tbody> 


解释 : <tbody> 元 素 主 要 是 包含 住 非 表 头 表 脚 的 主体 部 分 ， 有 助 于 表格 格式 的 清晰 ， 更 加 有 助 
于 后 续 CSS 和 JavaScript 的 控制 。 


6.<caption> 添 加 表格 标题 


<caption> 这 是 一 个 人 物 表 </caption> 


解释 : <caption> 元 素 给 表格 添加 一 个 标题 。 


7.<colgroup> 设 置 列 


<colgroup span="2" style="background:red;"> 


解释 : <colgroup> 元 素 是 为 了 处 理 茶 个 列 ，span 属性 定义 处 理 哪些 列 。1 表示 第 一 列 ，2 表 
示 前 两 列 。 如 果 要 单独 设置 第 二 列 ， 那 么 需要 声明 两 个 ， 先 处 理 第 一 个 ， 将 列 点 移入 第 二 
位 ， 再 处 理 第 二 个 即 可 。 


8.<col> 更 灵活 的 设置 列 


<colgroup> 

<col> 

<col style="background:red;" span="1"> 
</colgroup> 


解释 : <col> 元 素 表示 单独 一 列 ， 一 个 表示 一 列 ， 控 制 更 加 灵活 。 如 果 设 置 了 span 则 ， 控 制 
多 列 。 


第 7 章 文 档 元 素 

学 习 要 点 : 

1. 文 档 元 素 总 汇 

2. 文 档 元 素 解 析 

主讲 教师 : 李 炎 恢 

本 章 主要 探讨 HTML5 中 文档 元 素 ， 文 档 元 素 的 主要 作用 是 划分 各 个 不 同 的 内 容 ， 让 整个 布局 
清晰 明快 。 让 整个 布局 元 素 具 有 语义 ， 进 一 步 替代 div。 

一 . 文档 元 素 总 汇 文档 元 素 基 本 没有 什么 实际 作用 效果 ， 主 要 目的 是 在 页 面 布局 时 区 分 各 个 
主题 和 概念 。 


元 素 名 称 说 明 
h1~h6 表示 标题 
header 表示 首部 
footer 表示 尾部 
nav 表示 有 意 集中 在 一 起 的 导航 元 素 
section 表示 重要 概念 或 主题 
article 表示 一 段 独立 的 内 容 
address 表示 文档 或 article 的 联系 信息 
aside 表示 与 周边 内 容 少 有 牵涉 的 内 容 
hgroup 将 一 组 标题 组 织 在 一 起 
details 生成 一 个 区 域 ， 用 户 将 其 展开 可 以 获得 更 多 细节 
summary 用 在 details 元 素 中 ， 表 示 该 元 素 内 容 的 标题 或 说 明 


二 文档 元 素 解析 


文档 元 素 的 大 部 分 标签 ， 是 没有 任何 效果 的 ， 完 全 是 为 了 配合 语义 使 用 ， 以 强调 它 的 结构 
性 。 只 有 在 后 面 的 草 节 学 习 CSS， 配 合 使 用 才能 起 到 布局 和 样式 的 效果 。 


1.<header> 表 示 首 部 


<header> 这 里 部 分 一 般 是 页 面 头 部 ， 包 括 : L0G0、 标 题 、 导 航 等 内 容 </header> 


解释 : <header> 元 素 主 要 设置 页 面 的 标 头 部 分 。 


2.<footer> 表 示 尾 部 


<footer> 这 里 是 页 面 的 尾部 ， 一 般 包 括 : 版 权 声 明 、 友 情 链 接 等 内 容 </footer> 


解释 : <footer> 元 素 主 要 设置 页 面 的 尾部 。 


3.<h1>~<h6> 添 加 标题 


<h1> 标 题 部 分 </h1> 


&1t;h4&gt; 小 标题 部 分 &1lt;/h4&gt; 


解释 : <h1>~<h6> 实 际 作 用 就 是 加 粗 并 改变 字体 大 小 。 用 于 各 种 标题 文档 。 


4.<hgroup> 组 合 标题 


<hgroup> 
<h1> 标 题 部 分 </h1> 
<h4> 小 标题 部 分 </h4> 
</hgroup> 


解释 : <hgroup> 元 素 的 作用 就 是 当 多 个 标题 出 现 ， 干 扰 到 一 对 或 多 个 本 身 需 要 整合 的 标题 ， 
这 是 使 用 此 元 素 包 含 群 组 。 
5.<section> 文 档 主题 


<section> 这 里 一 般 是 存放 文档 主题 内 容 。 </section> 


解释 : <section> 元 素 的 作用 是 定义 一 个 文档 的 主题 内 容 。 


6.<nav> 添 加 导航 


<nav> 这 里 存放 文档 的 导航 </nav> 


解释 : <nav> 元 素 给 文档 页 面 添 加 一 个 导航 。 


7.<article> 添 加 一 个 独立 成 篇 的 文档 


<article> 
<header> 
<nav></nav> 
</header> 
<section></section> 
<footer></footer> 
</article> 


解释 : <article> 元 素 表示 独立 成 篇 的 文档 ， 里 面 可 以 包含 头 、 尾 、 主 题 等 一 系列 内 容 。 在 比较 
大 的 页 面 中 会 使 用 到 ， 比 如 一 片 博 文 的 列表 ， 每 篇 博文 ， 都 有 自己 的 头 、 尾 、 主 题 等 内 容 。 
和 此 相似 的 还 有 论坛 的 帖子 、 用 户 的 评论 、 新 闻 等 。 


8.<aside> 生 成 注释 栏 


<aside> 这 是 是 一 个 注释 </aside> 


解释 : <aside> 元 素 专门 为 某 一 段 内 容 进 行 注释 使 用 。 


9.<address> 表 示 文 档 或 article 元 素 的 联系 信息 。 
<address> 联 系 信 息 </address> 
解释 : 如 果 是 在 <body> 元 素 下 时 ， 表 示 整 个 文档 的 联系 信息 。 如 果 是 在 <article> 元 素 下 时 ， 
表示 其 下 的 联系 信息 。 
10.<details> 元 素 生成 详情 区 域 、<summary> 元 素 在 其 内 部 生成 说 明 标 签 


解释 : 由 于 大 多 数 主流 浏览 器 尚未 支持 ， 暂 略 。 


第 8 章 区 入 元 素 

学 习 要 点 : 

1. 襄 入 元 素 总 汇 

2. 嵌 入 元 素 解 析 

主讲 教师 : 李 炎 恢 

本 章 主要 探讨 HTML5 中 褒 入 元 素 ， 赂 入 元 素 主要 功能 是 把 外 部 的 一 些 资 源 插入 到 HTML 中 。 
一 . 诬 入 元 素 总 汇 


这 里 所 列 出 的 元 素 ， 并 非 本 节 课 全 部 涉及 到 ， 比 如 音频 audio、 视 频 video、 以 及 动态 图 像 
canvas 和 媒体 资源 source、track 等 会 在 后 面 章节 或 季度 讲解 。 


元 素 名 称 说 明 
img 诅 入 图 片 
map 定义 客户 端 分 区 响应 图 
area 表示 一 个 用 户 客 户 端 分 区 响应 图 的 区 域 
audio 表示 一 个 音频 资源 
video 表示 一 个 视频 资源 
iframe 裔 入 一 个 文档 
embed 用 插件 在 HTML 中 诅 入 内 容 
canvas 生成 一 个 动态 的 图 形 画布 
meter 嵌入 数值 在 许可 值 范围 背景 中 的 图 形 表示 
object 在 HTML 文档 中 瞪 入 内 容 
param 表示 将 通过 object 元 素 传 递 给 插件 的 参数 
progress 诅 入 目标 进展 或 任务 完成 情况 的 图 形 表示 
source 表示 媒体 资源 
svg 表示 结构 化 矢量 内 容 
track 表示 媒体 的 附加 轨道 (例如 字幕 ) 


二 谨 入 元 素 解析 


1.<img>** 详 入 图 像 ** 


<img src="img.png"> 


解释 : <img> 元 素 主要 是 插入 一 张 外 部 的 图 片 ， 那 么 图 片 的 路 径 问 题 和 超 链 接 一 致 。 


img 的 私有 属性 


属性 名 称 说 明 
src 诅 入 图 像 的 URL 
alt 当 图 片 不 加 载 时 显示 的 备用 内 容 
width 定义 图 片 的 长 度 (单位 是 像素 ) 
height 定义 图 片 的 高 度 (单位 是 像素 ) 
ismap 创建 服务 器 端 分 区 响应 图 
usemap 关联 <map> 元 素 


<a href="index.html"> 
<img src="img.png" width="339" height="229" alt=" 风 景 图 " ismap> </a> 


2.<map>* 创 建 分 区 响应 图 ** 


<img src="img.png"” alt=" 风 景 图 " width="339" height="229" usemap="#Map"> <map name="Map"> 
<area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_ blank" alt 
<area shape="circle" coords="187,142,47" href="http://www.google.com" target="_ blank" alt 
<area shape="poly" coords="287,26,240,66,308,112" href="http://www.soso.com" target="_bla 
</map> 


国 En 


解释 : 通过 图 片 中 的 热点 进行 超 链接 ， 这 里 我 们 采用 Dreamweaver 进行 操作 生成 的 。 





3.<iframe>** 襄 入 另 一 个 文档 六 


<a href="index.html" target="in">index</a> | <a href="http://www.baidu.com" target="in">E 


&lt;iframe src="http://www.ycku.com" width="600" height="500" name="in"&gt;&lt;/iframe&gt 


一 





解释 : <iframe> 表 示 内 敬一 个 HTML 文档 。 其 下 的 src 属性 表示 初始 化 时 显示 的 页 面 ，width 
和 height 表示 内 贬 文 档 的 长 度 和 高 度 ，name 表示 用 于 target 的 名 称 。 


4.<embed>* 衣 入 插件 内 容 ** 


<embed src="http://www.tudou.com/v/i4ZZvFwf luI/&bid=05&rpid=50797543&resourceId=50797543_ 


: | 








解释 : <embed> 元 素 是 扩展 浏览 器 的 功能 ， 大 部 分 ee 支持 。 这 里 添加 了 一 个 
土豆 网 的 flash 视频 。type ， 这 里 不 列 出 所 有 ， 后 面 如 果 遇 到 其 他 
类 型 的 文件 ， 再 继续 探讨 ; width 和 height 表示 宽 3 ; Src 表示 文件 路 径 。 


5.<object>* 和 <param> 元 素 ** 


解释 : <object> 元 素 和 <embed> 一 样 ， 只 不 过 object 是 html4 的 标准 ， 而 embed 是 html5 的 
标准 。 而 object 不 但 可 以 谋 入 flash， 还 可 以 诅 入 图 片 等 其 他 内 容 。 由 于 图 片 、 音 频 、 视 频 、 
插件 都 有 相应 标签 元 素 代 替 ， 我 们 这 里 暂时 不 对 其 详细 讲解 。 


6.<progress>* 显 示 进 度 ** 


<progress value="30" max="100"></progress> 


解释 : <progress> 元 素 可 以 显示 一 个 进度 条 ， 一 般 通 过 JS 控制 内 部 的 值 。|E9 以 及 更 低 版 本 
不 支持 此 元 素 。 


7.<meter>* 显 示范 围 里 的 值 ** 


<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter> 


解释 : <meter> 元 素 显 示 某 个 范围 内 的 值 。 其 下 的 属性 包含 : min 和 max 表示 范围 边界 ，low 
表示 小 于 它 的 值 过 低 ，high 表示 大 于 它 的 值 过 高 ，optimum 表示 最 佳 值 ， 但 不 出 现 效 果 。|E 
浏 1 览 器 不 “支持 此 元 素 。 


学 习 要 点 : 
音频 和 视频 概述 
2.video 视频 元 素 
3.audio 音频 元 素 
主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 音频 和 视频 元 素 ， 通 过 这 两 个 原生 的 媒体 元 素 向 HTML 页 面 中 嵌入 
音频 和 视频 。 


一 .音频 和 视频 概述 

首先 ， 我 们 要 理解 两 个 概念 : 容器 (container) 和 编 解码 器 (codec) 。 

1. 六 视频 容器 入 

音频 文件 或 视频 文件 ， 1 是 一 个 容器 文件 。 视 频 文 件 包 含 了 音频 轨道 、 视 频 轨 道 和 其 他 一 
些 元 数据 。 视 频 播放 时 ， 音 频 轨 道 和 视频 轨道 是 绑 定 在 一 起 的 。 元 数据 包含 了 视频 的 封面 、 

dA 

为 : .avi、 flv、.mp4、.mkv、.0gg、.webm。 

2. 编 解码 器 *” 

音频 和 视频 编码 /解码 是 一 组 算法 ， 用 来 对 一 段 特定 音频 或 视频 进行 解码 和 编码 ， 以 便 音 

视频 能 够 播放 。 原 始 的 媒体 文件 体积 非常 巨大 ， 如 果 不 对 其 进行 编码 ， 那 么 数据 量 是 非常 

人 的 ， 在 互联 网 上 传播 则 要 耗费 无 法 忍受 的 时 间 ; 如 果 不 对 其 进行 解码 ， 就 无 


数据 重组 为 原始 的 媒体 数据 。 主 流 的 音频 编 解 码 器 : AAC、MPEG-3、Ogg Voribs， 视 频 编 解 
码 器 : H.264、VP8、Ogg Theora 。 


3.** 浏 览 器 支持 情况 ** 


起 初 ，HTML5 规范 本 来 打算 指定 编 解 码 器 ， 但 实施 起 来 极为 困难 。 部 分 厂商 已 有 自己 的 标 
准 ， 不 愿 实现 标准 ; 而 有 一 些 编 解码 器 受 专利 保护 ， 需 要 支付 昂贵 费用 。 最 终 放 弃 了 统一 规 
范 的 要 求 ， 导 致 各 个 浏览 器 实现 自己 的 标准 。 


容器 格式 视频 编 解码 音频 编 解 码 IE9+ Firefox5+ Chrome13+ 
WebM VP8 Vorbis x y y 
OGG Theora Vorbis x y y 


MPEG-4 H.264 AAC y x 疑问 ? 


除了 上 面 三 款 浏 览 器 ， 还 有 Safari5+ 支 持 MPEG-4,Opera11 支持 WebM 和 OGG， 通 过 这 组 
er ed 但 对 于 新 的 高 清 标准 WebM ， 当 然 是 非常 必要 
的 。 因 为 WebM 不 但 清晰 度 高 ， 而 且 免 费 ， 不 受 限制 许可 的 使 用 源码 和 专利 权 。 


目前 Chrome 浏览 器 ， 为 了 推广 WebM 格式 的 视频 。 声 称 未 来 将 放弃 H.264 编码 的 视频 ， 所 
以 有 可 能 在 以 后 的 版 本 中 无 法 播放 MP4 的 视频 。 当 然 ， 目 前 演示 的 版 本 还 是 支持 的 。 


二 :xxvideoxx 视频 元 素 


以 往 的 视频 播放 ， 需 要 借助 Flash 插件 才 可 以 实现 。 但 Flash 插件 的 不 稳定 性 经 常 让 浏览 器 
导致 崩 演 ， 因 此 很 多 浏览 器 或 系统 厂商 开始 抛弃 它 。 而 取代 它 的 正 是 HTML5 的 video 元 素 。 


属性 名 称 说 明 
src 视频 资源 的 URL 
width 视频 宽度 
height 视频 高 度 
autoplay 设置 后 ， 表 示 立 刻 开始 播放 视频 
preload 设置 后 ， 表 示 预 先 载 入 视频 
controls 设置 后 ， 表 示 显 示 播 放 控件 
loop 设置 后 ， 表 示 反 复 播放 视频 
muted 设置 后 ， 表 示 视 频 处 于 静音 状态 
poster 指定 视频 数据 载 入 时 显示 的 图 片 


1.** 谋 入 一 个 * WebM 视频 
<video src="test.webm" width="800" height="600"></video> 
解释 : <video> 插 入 一 个 视频 ， 主 流 的 视频 为 .webm，.mp4，.ogg 等 。src 表示 资源 


URL ; width 表示 宽度 ; height 表示 高 度 


2. 从 附加 一 些 属性 兰 


<video src="test.webm" width="800" height="600" autoplay controls loop muted></video> 


解释 : autoplay 表示 自动 开始 播放 ; controls 表示 显示 播放 控件 ; loop 表示 循环 播放 ; muted 
表示 静音 。 


3.* 预 加 载 设置 ** 


<video src="http://1i.cc/test.webm" width="800" height="600" controls 
preload="none"></video> 


解释 : preload 属性 有 三 个 值 : none 表示 播放 器 什么 都 不 加 载 ; metadata 表示 播放 之 前 只 
加 载 元 数据 ( 宽 高 、 第 一 帧 画面 等 信息 ) ; auto 表示 请 求 浏览 器 尽快 下 载 整 个 视频 。 


4.* 使 用 预览 图 ** 
<video src="http://l1i.cc/test.webm" width="800" height="600" controls poster="img.png"></ 
图 一 


解释 : poster 属性 表示 在 视频 的 第 一 帧 ， 做 一 张 预览 图 。 








5." 灸 容 多 个 浏览 器 


<video width="800" height="600" controls poster="img.png"> 
<source src="test.webm"> 
<source src="test.mp4"> 
<source src="test. 0gg"> 
<object> 这 里 引入 flash 播放 器 实现 IE9 以 下 ， 但 没 必 要 了 </object> 
</video> 


解释 : 通过 <source> 元 素 引 入 多 种 格式 的 视频 ， 让 更 多 的 浏览 器 保持 兼容 。 
二 **gqudio** 音频 元 素 


和 video 元 素 一 样 ，audio 元 素 用 于 上 徐 入 音频 内 容 ， 而 音频 元 素 的 属性 和 视频 元 素 类 似 。 音 频 
的 支持 度 和 视频 类 似 ， 使 用 <source> 元 素 引 入 多 种 格式 兼容 即 可 。 主 流 的 音频 格式 
有 : .mp3，.m4a，.0gg，.wav 。 


属性 名 称 说 明 
src 视频 资源 的 URL 
autoplay 设置 后 ， 表 示 立 刻 开始 播放 视频 
preload 设置 后 ， 表 示 预 先 载 入 视频 
controls 设置 后 ， 表 示 显 示 播 放 控件 
1.* 谋 入 一 个 音频 ** 


<audio src="test.mp3" controls autoplay></audio> 


解释 : 和 误 入 视频 一 个 道理 。 


2.** 兼 容 多 个 浏览 器 * 


<audio controls> 
<source src="test.mp3"> 
<source src="test.m4a"> 
<source src="test.wav"> 
</audio> 


解释 : 略 。 


PS : 更 多 设计 到 API 的 JavaScript 控制 ， 将 在 以 后 的 基于 JavaScript 基础 后 讲解 。 


第 10 章 表单 元 素 [ 上 ] 


学 习 要 点 : 

1. 表 单元 素 总 汇 

2. 表 单元 素 解 析 

主讲 教师 : 李 炎 恢 

本 章 主要 探讨 HTML5 中 表单 元 素 ， 表 单元 素 用 于 获取 用 户 的 输入 数据 。 
一 :表单 元 素 总 汇 

在 HTML5 的 表单 中 ， 提 供 了 各 种 可 供用 户 输入 的 表单 控件 。 


元 素 名 称 说 明 
form 表示 HTML 表单 
input 表示 用 来 收集 用 户 输入 数据 的 控件 
textarea 表示 可 以 输入 多 行文 本 的 控件 
select 表示 用 来 提供 一 组 固定 的 选项 
option 表示 提供 提供 一 个 选项 
optgroup 表示 一 组 相关 的 option 元 素 
button 表示 可 用 来 提交 或 重 置 的 表单 按钮 (或 一 般 按钮 ) 
datalist 定义 一 组 提供 给 用 户 的 建议 值 
fieldset 表示 一 组 表单 元 素 
legend 表示 fieldset 元 素 的 说 明 性 标签 
label 表示 表单 元 素 的 说 明 标 签 
output 表示 计算 结果 


二 .表单 元 素 解 析 
1.<form>** 定 义 表 单 ** 


<form method="post" action="http://www.haosou.com/"> 


&lt;button&gt; 提 交 &]1t;/button&gt; 
&1lt;/formegt; 


解释 : <form> 元 素 主 要 是 定义 本 身 是 一 组 表单 。 


元 素 名 称 
action 


method 


enctype 


name 


target 
autocomplete 
novalidate 


// 使 用 get 提交 数据 


method="get" 


/丧失 自动 提示 功能 


说 明 
表示 表单 提交 的 页 面 
表示 表单 的 请 求 方式 : 有 POST 和 GET 两 种 ， 黑 认 GET 


表示 浏览 器 对 发 送 给 服务 器 的 数据 所 采用 的 编码 格式 。 有 三 种 : 
Re -Www-form-urlencoded (默认 编码 ， 不 能 将 文件 上 传 到 服 
务 器 ) 、multipart/form-data (用 于 上 传 文件 到 服务 器 ) 、text/plain (未 
规范 的 编码 ， 不 建议 使 用 ， 不 同 浏览 器 理解 不 同 ) 


设置 表单 名 称 ， 以 便 程 序 调用 
设置 提交 时 的 目标 位 置 : blank、_parent、_self、_top 


设置 浏览 器 记 住 用 户 输入 的 数据 ， 实 现 自动 完成 表单 。 默 认为 on 自动 
完成 ， 如 果 不 想 自动 完成 则 设置 of 。 


设置 是 否 执 行 客户 端 数 据 有 效 性 检查 ， 后 面 课程 讲解 。 


autocomplete="off" 


// 使 用 _blank 新 建 目标 


target="_blank" 


2.<input>** 表 示 用 户 输 入 数据 * 


<input name="Uuser"> 


解释 : <input> 元 素 默认 情况 会 出 现 一 个 单行 文本 框 ， 有 五 个 属性 


属性 名 称 
autofocus 
disabled 
autocomplete 
form 
type 


name 


说 明 
让 光标 聚焦 在 某 个 input 元 素 上 ， 让 用 户 直 接 输 入 
禁用 input 元 素 
单独 设置 input 元 素 的 自动 完成 功能 
让 表单 外 的 元 素 和 指定 的 表单 挂 钧 提交 
input 元 素 的 类 型 ， 内 容 较 多 ， 将 在 下 节 课 展开 讲解 
定义 input 元 素 的 名 称 ， 以 便 接 收 到 相应 的 值 


/聚焦 光标 


<input name="user" autofocus> 


/禁用 input 
<input name="user" disabled> 
/禁止 自动 完成 
<input name="user" autocomplete="off"> 


// 表 单 外 的 input 


<form method="get" id="register"> ... </form> 
<input name="email" form="register"> 


3.<label>** 添 加 说 明 标 签 六 


<p><label for="user'"> 用 户 名 : <input id="user" name="user"></label></p> 


解释 : <label> 元 素 可 以 关联 input， 让 用 户 体验 更 好 。 且 更 加 容易 设置 CSS 样式 。 


4.<fieldset>** 对 表单 进行 编组 ** 


<fieldset>...</fieldset> 


解释 : <fieldset> 元 素 可 以 将 一 些 表 单元 素 组 织 在 一 起 ， 形 成 一 个 整体 。 


属性 名 称 说 明 
name 给 分 组 定义 一 个 名 称 
form 让 表单 外 的 分 组 与 表单 挂 钓 
disabled 禁用 分 组 内 的 表单 


5.<legend>* 添 加 分 组 说 明 标 签 ** 


<fieldset> 
<legend> 注册 表单 </legend> 
</fieldset> 
解释 : <legend> 元 素 给 分 组 加 上 一 个 标题 。 


6.<button>** 添 加 按钮 ** 


<button type="submit"></button> 


解释 : <button> 元 素 添 加 一 个 按钮 ，type 属性 有 如 下 几 个 值 : 


值 名 称 说 明 
submit 表示 按钮 的 作用 是 提交 表单 ， 默 认 
reset 表示 按钮 的 作用 是 重 置 表单 
button 表示 按钮 为 一 般 性 按钮 ， 没 有 任何 作用 

// 提 交 表 单 


<button type="submit"> 提 交 </button> 


// 重 置 表单 
<button type="reset"> 重 置 </button> 
// 普 通 按钮 


<button type="button"> 按 钮 </button> 


对 于 type 属性 为 submit 时 ， 按 钮 还 会 提供 额外 的 属性 。 


属性 名 称 说 明 
form 指定 按钮 关联 的 表单 
formaction 覆盖 form 元 素 的 action 属性 
formenctype 履 盖 form 元 素 的 enctype 属性 
formmethod 覆盖 form 元 素 的 method 属性 
formtarget 覆盖 form 元 素 的 target 属性 
formnovalidate 覆盖 form 元 素 的 novalidate 属性 

1/ 表单 外 关联 提交 


<button type="submit" form="register"> 提 交 </button> 


第 10 草 表单 元 素 [中 ] 


学 习 要 点 : 

1.type 属性 总 汇 
2.type 属性 解析 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 表单 中 input 元 素 的 type 属性 ， 根 据 不 同 的 值 来 显示 不 同 的 输入 
框 。 


一 . *type* 属性 总 汇 


input 元 素 可 以 用 os 。 在 默认 的 情况 下 ， 什 么 样 的 数据 
均 可 以 输入 。 而 通过 不 同 的 属性 值 ， 可 以 限制 输入 的 内 容 。 


属性 名 称 说 明 
text 一 个 单行 文本 框 ， 默 认 行 为 
password 隐藏 字符 的 密码 框 
搜索 框 ， 在 某 些 浏览 器 键入 内 容 会 出 现 又 
Search 标记 取消 
submit、reset、button 生成 一 个 提交 按钮 、 重 置 按钮 、 普 通 按 钮 
只 能 输入 数值 的 框 ; 只 能 输入 在 一 个 数值 
number 、 range 范围 的 杠 
a i 
checkbox 、radio 用 户 句 选 框 ; 单 选 框 ， 只 能 在 几 
image 、 color 生成 一 个 图 片 按钮 ， 磊 色 代码 按钮 
一 个 检 况 、 呈 码 、 夕 闷 
email 、 tel 、url 生成 一 个 检测 电子 邮件 、 号 码 、 网 址 的 文 
本 框 
date N month 、time 、week、datetime、 获取 日 期 和 时 间 
datetime-local 
hidden 生成 一 个 隐藏 控件 
file 生成 一 个 上 传 控 件 


二 . *input** 元 素 解 析 


1.type 为 text 值 时 ** 


<input type="text"> 


解释 : 当 type 值 为 text 时 ， 哇 现 的 就 是 一 个 可 以 输入 任意 字符 的 文本 框 ， 这 也 是 默认 行为 。 
并 且 ， 还 提供 了 一 些 额外 的 属性 。 


属性 名 称 说 明 
list 指定 为 文本 框 提供 建议 值 的 datalist 元 素 ， 其 值 为 datalist 元 素 的 id 值 
maxlength 设置 文本 框 最 大 字符 长 度 
pattern 用 于 输入 验证 的 正则 表达 式 


placeholder ”输入 字符 的 提示 


readonly 文本 框 处 于 只 读 状 态 

disabled 文本 框 处 于 禁用 状态 

size 设置 文本 框 宽度 

value 设置 文本 框 初始 值 

required 表明 用 户 必须 输入 一 个 值 ， 否则 无 法 通过 输入 验证 
1/ 设置 文本 框 长 度 


<input type="text" size="50"> 


// 设 置 文本 框 输入 字符 长 度 


<input type="text" maxlength="10"> 


/设置 文本 框 的 初始 值 


<input type="text" value=" 初 始 值 "> 


/设置 文本 框 输入 提示 


px 


<input type="text" placeholder=" 请 输入 内 容 "> 


/设置 文本 提供 的 建议 值 


<input list="footlist"> 

<datalist id="footlist"> 
<option Value=" 革 有 果 "> 蔷 果 </option> 
<option Value=" 桔 子 "> 桔 子 </optIion> 
<option value=" 香 蕉 " label=" 香 蕉 "> 
<option value=" 旭 子 "> 

</datalist> 


/设置 文本 框 内 容 为 只 读 ， 可 以 提交 数据 
<input type="text" readonly> 


1/ 设置 文 本 框 内 容 不 可 用 ， 不 可 以 提交 数据 


<input type="text" disabled> 


2.type 为 * password 值 时 * 


<input type="password"> 


蚁 | 
计 


解释 : 当 type 值 为 password 时 ， 一 般 用 于 密码 框 的 输入 ， 所 有 的 字符 都 会 显示 星 号 。 
框 也 有 一 些 额外 属性 


属性 名 称 说 明 
maxlength 设置 密码 框 最 大 字符 长 度 
pattern 用 于 输入 验证 的 正则 表达 式 
placeholder 输入 密码 的 提示 
readonly 密码 框 处 于 只 读 状态 
disabled 文本 框 处 于 禁用 状态 
size 设置 密码 框 宽度 
value 设置 密码 框 初始 值 
required 表明 用 户 必须 输入 同一 个 值 


这 里 除了 正则 和 验证 需要 放 在 下 一 节 ， 其 余 和 文本 框 一 致 。 


3.type 为 * search 时 ** 


<input type="search"> 


解释 : 和 文本 框 一 致 ， 在 除 Firefox 浏览 器 的 其 他 现代 浏览 器 ， 会 显示 一 个 又 来 取消 搜索 内 
容 。 额 外 属性 也 和 text 一 致 。 
4.type 为 * number、range 时 * 


<input type="number"> 
<input type="range"> 


解释 : 只 限 输入 数字 的 文本 框 ， 不 同 浏览 器 可 能 显示 方式 不 同 。 生 成 一 个 数值 范围 文本 框 ， 
只 是 样式 是 拖 动 式 。 额 外 属性 如 下 : 


属性 名 称 说 明 
list 指定 为 文本 框 提供 建议 值 的 datalist 元 素 ， 其 值 为 datalist 元 素 的 id 值 
min 设置 可 接受 的 最 小 值 
max 设 定 可 接受 的 最 大 值 
readonly 设置 文本 框 内 容 只 读 
required 表明 用 户 必 须 输入 一 个 值 ， 否 则 无 法 通过 输入 验证 
step 指定 上 下 调节 值 的 步 长 
value 指定 初始 值 
// 范 围 和 步 长 


<input type="number”"” step="2" min="10" max="100"> 


5.type 为 * date 系列 时 入 


<input type="date"> 

<input type="month"> 

<input type="time"> 

<input type="week"> 

<input type="datetime"> 
<input type="datetime-local"> 


解释 : 实现 文本 框 可 以 获取 日 期 和 时 间 的 值 ， 但 支持 的 浏览 器 不 完整 。 我 们 测试 Chrome 和 
Opera 支持 ， 其 他 浏览 器 尚未 支持 。 所 以 ， 在 获取 日 期 和 时 间 ， 目 前 还 是 推荐 使 用 jQuery 等 
前 端 库 来 实现 日 历 功 能 。 额 外 属性 和 number 一 致 。 


6.type 为 * color 时 ** 


<input type="color"> 


解释 : 实现 文本 框 获取 颜色 的 功能 ， 最 新 的 现代 浏览 器 测试 后 |E 不 支持 ， 其 余 的 都 能 显示 一 
个 颜色 对 话 框 提供 选择 。 


7.type 为 * checkbox、radio 时 * 


音乐 <input type="checkbox"> 体育 <input type="checkbox"> 


<input type="radio" name="sex" value=" 男 "> 男 <input type="radio" name="sex" value=" 女 "> 去 
了 | 
解释 : 生成 一 个 获取 布尔 值 的 复 选 框 或 固定 选项 的 单 选 框 。 额 外 属性 如 下 : 





属性 名 称 说 明 


checked 设置 复 选 框 、 单 选 框 是 否 为 匀 选 状态 
required 表示 用 户 必 须 勾 选 ， 否 则 无 法 通过 验证 
value 设置 复 选 框 、 单 选 框 义 选 状态 时 提交 的 数据 。 默 认为 on 


// 软 认 勾 选 ， 轩 认 值 为 1 


<input type="checkbox" name="music" checked value="1"> 


8.type 为 * submit、reset 和 ** button 时 


<input type="submit"> 


解释 : 生成 一 个 按钮 ， 三 种 模式 : 提交 、 重 置 和 一 般 按 钮 ， 和 <button> 元 素 相 同 。 


值 名 称 说 明 
submit 生成 一 个 提交 按钮 
reset 生成 一 个 重 置 按 钮 
button 生成 一 个 普通 按钮 


如 果 是 submit 时 ， 还 提供 了 和 <button> 元 素 一 样 的 额外 属性 : formaction、formenctype、 
formmethod 、formtarget 和 formnovalidate 。 


9.type 为 * image 时 ** 


<input type="image" src="img.png"> 


解释 : 生成 一 个 图 片 按 钮 ， 点 击 图 片 就 实现 提交 功能 ， 并 且 传送 了 分 区 响应 数据 。 图 片 按钮 
也 提供 了 一 些 额外 属性 。 


属性 名 称 说 明 
src 指定 要 显示 图 像 的 URL 
alt 提供 图 片 的 文字 说 明 
width 图 像 的 长 度 
height 图 像 的 高 度 
提交 额外 属 formaction 、 formenctype 、formmethod 、formtarget 和 
性 formnovalidate 。 


10.type 为 * email、tel 、url 时 ** 


<input type="email"> 
<input type="tel"> 
<input type="url"> 


解释 : email 为 Rs 、tel 为 电话 格式 、Ur| 为 网 址 格式 。 额 A text 一 致 。 但 对 
于 这 几 种 类 型 ， 浏 览 器 支持 是 不 同 的 。email 支持 比较 好 ， es 览 器 都 支持 格式 验证 ; tel 
基本 不 支持 ; url a ， 部 分 浏览 器 只 要 检测 到 http:// 就 能 o 


11.type 为 * hidden 时 ** 


<input type="hidden"> 


解释 : 生成 一 个 隐藏 控件 ， 一 般 用 于 表单 提交 时 关联 主键 ID 提交， 而 这 个 数据 作为 隐藏 存 
在 o 


12.type 为 * file 时 ** 


<input type="file"> 


解释 : 生成 一 个 文件 上 传 控件 ， 用 于 文件 的 上 传 。 额 外 提供 了 一 些 属 性 


属性 名 称 说 明 
accept 指定 接受 的 MIME 类 型 
required 表明 用 户 必 须 提 供 一 个 值 ， 否 则 无 法 通过 验证 


accept="image/gif, image/jpeg, image/png" 


第 10 草 表单 元 素 [ 下 ] 


学 习 要 点 : 

1. 其 他 元 素 

2. 输 入 验证 

主讲 教师 : 李 炎 恢 

本 章 主 要 探讨 HTML5 中 表单 中 剩余 的 其 他 元 素 ， 然 后 重点 了 解 一 下 表单 的 输入 验证 功能 。 


其 他 元 素 
表单 元 素 还 剩 下 几 个 元 素 没有 讲解 ， 包 括 下 拉 框 列表 select、 多 行文 本 框 textarea、 和 output 
， 
元 素 名 称 说 明 

select 生成 一 个 下 拉 列 表 进 行 选择 

optgroup 对 select 元 素 进 行 编组 

option select 元 素 中 的 项 目 

textarea 生成 一 个 多 行文 本 杠 

output 表示 计算 结果 


1. 尼 生成 下 拉 列 表 ** 
<select name="fruit"> 
<option value="1"> 苹 果 </option> 
&lLt;option value="2"&gt; 橘 子 &1lt;/option&gt; 


&lt;option value="3"&gt; 香 蕉 &1lt;/option&gt; 
&lt;/select&gt; 


解释 : <select> 下 拉 列 表 元 素 至 少 包 含 一 个 <option> 子 元 素 ， 才 能 形 选项 列表 。 
<select> 元 素 包 含 两 个 子 元 素 <option> 项 目 元 素 和 <optgroup> 分 组 元 素 ， 还 包含 了 一 些 额 外 属 
小 Lo] 


属性 名 称 说 明 


name 设 定 提交 时 的 名 称 

disabled 将 下 拉 列 表 禁 

form 将 表单 外 的 下 拉 列 表 与 菜 个 表单 挂 钧 
size 设置 下 拉 列 表 的 高 度 

multiple 设置 是 否 可 以 多 选 

autofocus 获取 焦点 

required 选择 验证 ， 设 置 后 必须 选择 才能 通过 


/设置 高 度 并 实现 多 选 

<select name="fruit" size="30" multiple> 
// 默 认 首 选 

<option value="2" selected> 桶 子 </option> 


// 使 用 optgroup 进行 分 组 ，label 为 分 组 名 称 ，disabled 可 以 禁用 分 组 


<optgroup label=" 水 果 类 "> 
<option Value="1"> 蔷 果 </option> 
<option Value="2" selected> 桶 子 </option> 
<option value="3" label=" 香 蕉 "> 香蕉 </option> 
</optgroup> 


2.* 多 行文 本 框 * 
<textarea name="content"> 请 留 下 您 的 建议 ! </textarea> 


解释 : 生成 一 个 可 变更 大 小 的 多 行文 本 框 。 属 性 如 下 : 


属性 名 称 说 明 


name 设 定 提交 时 的 名 称 

form 将 表单 外 的 多 行文 本 框 与 某 个 表单 挂 多 
readonly 设置 多 行文 本 框 只 读 

disabled 将 多 行文 本 框 禁用 

maxlength 设置 最 大 可 输入 的 字符 长 度 

autofocus 获取 焦点 

placeholder 设置 输入 时 的 提示 信息 

rows 设置 行 数 

cols 设置 列 数 

wrap 设置 是 否 插入 换行 符 ， 有 soft 和 hard 两 种 
required 设置 必须 输入 值 ， 否 则 无 法 通过 验证 


/设置 行 高 和 列 宽 ， 设 置 插入 换行 符 


<textarea name="content" rows="20" cols="30" wrap="hard"></textarea> 


3. 计 算 结 果 


<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber"> 
<input type="number" id="num1"> x <input type="number™" id="num2"> 
<output for="num1 num2" name="res"> 

</form> 


解释 : output 就 是 计算 两 个 文本 框 之 问 的 值 ， 其 实 就 是 内 区 了 JavaScript 功能 。 
二 .输入 验证 


HTML5 对 表单 提供 了 输入 验证 检查 方式 ， 但 这 还 是 比较 简陋 的 ， 并 且 不 同 的 浏览 器 支 
持 的 成 熟 度 还 不 同 。 在 大 部 分 情况 下 ， 可 能 还 是 要 借助 jQuery 等 前 端 库 来 实现 丰富 的 验证 功 
能 和 显示 效果 。 


// 必 须 填写 一 个 值 
<input type="text" required> 
1/ 限定 在 茶 一 个 范围 内 


<input type="number" min="10" max="100"> 


// 使 用 正则 表达 式 


<input type="text" placeholder=" 请 输入 区 号 + 座机 " required pattern="^[\d]{2,4}\-[\d]{6,8}$"> 
ses oo 
// 禁 止 表单 验证 


<form action="http://li.cc" novalidate> 


李 炎 恢 HTML CSS JavaScript PHP Bootstrap 教程 


第 11 章 全 局 属性 和 其 他 


学 习 要 点 : 

1. 实 体 

2. 元 数据 

3. 全 局 属性 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 的 HTML 实体 、 以 及 HTML 核心 构成 的 元 数据 ， 最 后 了 解 一 下 
HTML 中 的 全 局 属性 。 


一 .实体 


HTML 实体 就 是 将 有 特殊 意义 的 字符 通过 实体 代码 显示 出 来 。 


显示 结果 实体 名 称 实体 编号 





第 11 章 全 局 属性 和 其 他 54 


<meta> 元 素 可 以 定义 文档 中 的 各 种 元 数据 ， 而 且 一 个 HTML 页 面 可 以 包含 多 个 <meta> 元 
素 。 


1.** 指 定名 / 值 元 数据 对 ** 
<meta name="author" content="bnbbs"> 
<meta name="description" content=" 这 是 一 个 HTML5 页 面 "> 
&lt;meta name="keywords" content="html5,css3, 响应 式 "&gt; 


&lt;meta name="generator" content="sublime text 3"&gt; 


元 数据 名 称 说 明 
author 当前 页 面 的 作者 
description 当前 页 面 的 描述 
keywords 当前 页 面 的 关键 字 
generator 当前 页 面 的 编码 工具 





2. 声 明 字符 编码 


<meta charset="utf-8"> 


3. 模 拟 HTTP 标 头 字段 


//5 秒 跳 转 到 指定 URL 


<meta http-equiv="refresh" content="5;http://li.cc"> 


// 另 一 种 声明 字符 编码 


<meta http-equiv="content-type" content="text/html charset=utf-8"> 


属性 值 说 明 
refresh 重新 载 入 当前 页 面 ， 或 指定 一 个 URL。 单 位 秒 。 
content-type 另 一 种 声明 字符 编码 的 方式 

三 .全 局 属性 


在 此 之 前 ， 我 们 涉及 到 的 元 素 都 讲解 了 它 的 局 部 数据 ， 当 然 也 知道 一 些 全 局 属性 ， 比 如 id。 全 
局 属性 是 所 有 元 素 共 有 的 行为 ，HTML5 还 提供 了 一 些 其 他 的 全 局 属性 。 


1.id 属性 


<p id="abc"> 段 落 </p> 


解释 : id 属性 给 元 素 分 配 一 个 唯一 标识 符 。 这 种 标识 符 通 常用 来 给 CSS 和 JavaScript 调用 选 
择 元 素 。 一 个 页 面 只 能 出 现 一 次 同一 个 id 名 称 。 


2.class 属性 


<p class="abc"> 段 落 </p> 


&lt;p class="abc"&gt; 上 段落 &1lt;/p&gt; 


EE 


&lt;p class="abc"&gt; 上 段落 &]t;/p&gt; 


解释 : class 属性 用 来 给 元 素 归 类 。 通 过 是 文档 中 某 一 个 或 多 个 元 素 同 时 设置 CSS 样式 。 
3.accesskey 属性 

<input type="text" name="user" accesskey="n"> 
解释 : 快捷 键 操作 ，windows 下 alt+ 指 定 键 ， 前 提 是 浏览 器 alt 并 不 冲突 。 
4.contenteditable 属性 


<p contenteditable="true"> 我 可 以 修改 吗 </p> 


解释 : 让 文本 处 于 可 编辑 状态 ， 设 置 true 则 可 以 编辑 ，false 则 不 可 编辑 。 或 者 直接 设置 属 
小 oo 


5.dir 属性 


<p dir="rt1"> 文 字 到 右边 了 </p> 


解释 : 让 文本 从 左 到 右 (ltr) ， 还 是 从 右 到 左 (rt|) 。 


6.hidden 属性 


<p hidden> 文 字 到 右边 了 </p> 


解释 : 隐藏 元 素 。 
7.lang 属性 


<p lang="en">HTML5</p> 


解释 : 可 以 局 部 设置 语言 。 


8.title 属性 


<p title="HTML5 教程 ">HTML5</p> 


解释 : 对 元 素 的 内 容 进 行 额外 的 提示 。 


9.tabindex 属性 


<input type="text" name="user" tabindex="2"> 


&lt;input type="text" name="user" tabindex="1"&gt; 


解释 : 表单 中 按 下 tab 键 ， 实 现 获取 焦点 的 顺序 。 如 果 是 -1， 则 不 会 被 选中 。 


10.style 属性 


<p style="color:red;">CSS 样式 </p> 


解释 : 设置 元 素 行内 CSS 样式 。 


第 12 草 CSS 入 门 


学 习 要 点 : 
1. 使 用 CSS 
2. 三 种 方式 

3. 层 县 和 继承 
主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 CSS ( 层 梧 样式 表 ) ， 它 是 用 来 对 HTML 文档 外 观 的 表现 形式 进行 
排版 和 格式 化 。 


一 使 用 CSS 


CSS 样式 由 一 条 或 多 条 以 分 号 隔 开 的 样式 声明 组 成 。 每 条 声明 的 样式 包含 着 一 个 CSS 属性 
和 属性 值 。 


<p style="color:red;font-size:50px;"> 这 是 一 段 文 本 </p> 
解释 : style 是 行内 样式 属性 。color 是 颜色 属性 ，red 是 颜色 属性 值 ; font-size 是 字体 大 小 属 
性 ，50px 是 字体 大 小 属性 值 。 
二 .三 种 方式 
创建 CSS 样式 表 有 三 种 方式 : 1. 元 素 内 骨 样 式 ; 2. 文 档 内 诅 样 式 ; 3. 外 部 引入 样式 。 
1.** 元 素 内 诅 样 式 ** 


<p style="color:red;font-size:50px;"> 这 是 一 段 文 本 </p> 
解释 : 即 在 当前 元 素 使 用 style 属性 的 声明 方式 。 
2.** 文 档 内 赂 样式 ** 


<style type="text/css" >pf{ color: blue; font-size: 40px; 
&lt;/style&gt,; 


&1lt ;p&gt ;这 是 一 段 文本 &1t;/p&gt; 


解释 : 在 <head> 元 素 之 间 创 建 <style> 元 素 ， 通 过 选择 器 的 方式 调用 指定 的 元 素 并 设置 相关 
CSS 。 


3.** 外 部 引用 样式 ** 


<link rel="stylesheet" type="text/css" href="style.css"> 


//style.css 


@charset "utf-8"; 
pi color: green; font-size: 30px; 


} 


解释 : 很 多 时 候 ， 大 量 的 HTML 页 面 使 用 了 同一 个 组 CSS。 那 么 就 可 以 将 这 些 CSS 样式 保 
存在 一 个 单独 的 .css 文件 中 ， 然 后 通过 <link> 元 素 去 引入 它 即 可 。@charset "utf-8" 表明 设置 
CSS 的 字符 编码 ， 如 果 不 写 默认 就 是 utf-8。 如 果 有 多 个 .css 文件 ， 可 以 使 用 @import 导入 
方式 引入 .css 文件 。 只 不 过 ， 性 能 不 如 多 个 <link> 链 接 。 


三 : 层 全 和 继承 


所 谓 的 样式 表层 党 : On nA a 生 的 样式 重合 。 样 式 表 继 
承 : 人 它 父 元 素 样 式 。 还 有 一 种 样式 叫 浏览 器 样式 ， 是 这 个 元 
素 在 这 个 浏览 器 运行 时 默认 附加 的 样式 。 


<b> 这 个 元 素 隐 含 加 粗 样式 </b> 
<span style="font-weight:bold;"> 这 个 元 素 通 过 style 加 粗 </span> 


解释 : <b> 元 素 就 是 具有 加 粗 的 隐 含 样式 ， 而 <span> 元 素 没有 任何 隐 含 样式 ， 通 过 style 属性 
设置 样式 。 
2. 闪 样式 表层 枉 入 


样式 表层 三 通过 五 种 方式 进行 ， 如 果 样 式 相 同 ， 那 么 比如 会 产生 冲突 替换 。 这 时 ， 它 的 优先 
级 顺序 就 显 的 比较 重要 。 以 下 优先 级 从 低 到 高 : 


(1). 浏 览 器 样式 (元 素 自身 携带 的 样式 ) ，; 
(2). 外 部 引入 样式 (使 用 <link> 引 入 的 样式 ) ; 
(3). 文 档 内 骨 样 式 (使 用 <style> 元 素 设置 ) ; 
(4). 元 素 内 嵌 样 式 (使 用 style 属性 设置 ) 。 
// 元 素 内 髓 


<p style="color:red;font-size:30px;"> 我 将 被 三 种 方式 县 加 样式 </p> 


/文档 内 风 


<style type="text/css"> 
pi color:blue; font-weight: bold; 


} 
&lt;/style&gt,; 


// 外 部 引入 


@charset "utf-8"; 
pi color: green; font-style: italic; 


} 
如 果菜 一 个 样式 被 优先 级 高 的 给 葵 换 掉 了 ， 却 又 想 执 行 这 个 样式 方案 ， 可 以 将 这 个 方案 标记 
成 重要 样式 (important) 。 
/强行 设置 最 高 优先 级 


color: green !important 


3.o 样 式 继承 人 
如 果 某 一 个 元 素 并 没有 设置 父 元 素 相关 的 样式 ， 那 么 就 会 使 用 继承 机 制 将 父 元 素 的 样式 集成 
下 来。 


/<b> 元 素 继承 了 <p> 元 素 的 样式 


<p style="color:red;"> 这 是 <b>HTML5</b></p> 


样式 继承 只 适用 于 元 素 的 外 观 (文字 、 颜 色 、 字 体 等 )， 而 元 素 在 页 面 上 的 布局 样式 则 不 会 
被 继承 。 如 果 继 承 这 种 样式 ， 就 必须 使 用 强制 继承 : inherit 。 


/强制 继承 布局 样式 


<p> 这 是 <b>HTML5</b></p> 
<style type="text/css"> 


pi border: 1px solid red; 
了 b border : inherit; 

} 

&lt;/style&gt; 


学 习 要 点 : 


地 炎 恢 


主讲 教师 : 


电位 到 想 要 设置 样式 的 元 素 。 目 前 CSS 


代 ， 即 CSS3 选择 器 。CSS3 选择 器 提供 了 更 多 、 更 丰富 的 选 


本 章 主 要 探讨 HTML5 中 CSS 选 j 
选择 器 的 版 本 已 经 升级 至 第 


三 大 类 。 


方式 ， 主 要 分 为 


口 吕 
己 它 


择 


种 选择 器 


本 节 课 主要 涉及 到 


CSS 版 本 


说 明 


名 称 


选择 所 有 元 素 


<type> 


指定 id 属性 的 元 素 
选择 指定 class 属性 的 元 素 
选择 指定 attr 属性 的 元 素 


We 


un 


id 选 # 


#<id> 


.<class> 


Ye 


属性 选择 


[attr] 系 列 


S1,S2,S3... 
S1 S2 


We 


un 


后 代 选 了 


S1 > S2 


S1 + S2 


S1 ~ S2 


选择 块 级 元 素 文 本 的 首 行 


We 


伪 元 素 选 择 
伪 元 素 选 择 


:first-line 


选择 块 级 元 素 文 本 的 首 字母 
选择 元 素 之 前 插入 内 容 


We 


:first-letter 


:before 


选择 元 素 之 后 插入 内 容 


:after 


使 用 简单 且 频率 高 的 一 些 选 择 器 归 类 为 基本 选择 器 。 
1.** 通 用 选择 器 ** 


* { border: 1px solid red; 
} 


解释 : “号 选择 器 是 通用 选择 器 ， 功 能 是 匹配 所 有 html 元 素 的 选择 器 包括 <html> 和 <body> 标 
签 。 可 以 使 用 如 下 元 素 标记 测试 效果 : 


<p> 段 落 </p> 
&lLt;b&gt; 加 粗 &lLt;/b&gt 


&lLt;span&gt ;无 &lt;/Sspan&gt ; 


通用 选择 器 会 人 ， 这 是 把 双 刃 剑 ， 好 处 就 是 非常 方便 ， 坏 处 就 是 将 
不 必要 的 元 素 也 配置 了 。 目 前 为 止 ， 还 不 存在 所 有 元 素 都 必须 配置 的 样式 ， 所 以 ， 一 般 来 
说 ， 不 常用 。 


<p> 段 落 </p> 


解释 : 直接 使 用 元 素 名 称 作为 选择 器 名 即 可 。 
3.ID 选择 器 


#abc { font-size: 20px; 
} 


<p id="abc"> 段 落 </p> 


解释 : 通过 对 元 素 设置 全 局 属性 id， 然 后 使 用 #fid 值 来 选择 页 面 唯一 元 素 。 


,abc { border: 1px solid red; 
} 


<b class="abc"> 加 粗 </b> 


&lt;span class="abc"&gt; 无 &lt;/spang&gt; 


解释 : 通过 对 元 素 设置 全 局 属性 class， 然 后 使 用 .class 值 选择 页 面 一 个 或 多 个 元 素 。 


b.abc { border: 1px solid red ; 


解释 : 也 可 以 使 用 “元 素 .class 值 " 的 形式 ， 限 定 某 种 类 型 的 元 素 。 
<Span class="abc edf"> 无 </span> 
解释 : 类 选择 器 还 可 以 调用 多 个 样式 ， 中 间 用 空格 隔 开 进行 层 登 。 


5.x** 属 性 选择 A 


// 所 需 CSS2 版 本 


[href] { color: orange 


解释 : 属性 选择 器 ， 直 接 通过 两 个 中 括号 里 面包 含 属性 名 即 可 。 当 然 ， 还 有 更 多 扩展 的 属性 


// 所 需 CSS2 版 本 


[type="password"] { border: 1px solid red; 


解释 : 匹配 属性 值 的 属性 选择 器 。 


// 所 需 版 本 CSS3 


[href^="http"] { color: orange; 
} 


解释 : 属性 值 开头 匹配 的 属性 选 j 


1% 
和 


// 所 需 版 本 CSS3 


[href$=".com"] { color: orange; 


} 


解释 : 属性 值 结 尾 匹 配 的 属性 选择 器 


组 
O 


// 所 需 版 本 CSS3 


[href*="baidu"] { color: orange 


} 


解释 : 属性 值 包含 指定 字符 的 属性 选择 器 。 


// 所 需 版 本 CSS2 


[class~="edf"] { font-size: S50Opx; 
} 


解释 : 属性 值 具有 多 个 值 时 ， 匹 配 其 中 一 个 值 的 属性 选择 器 。 


// 所 需 版 本 CSS2 


[lang|="en"] { color: red; 


解释 : 属性 值 具 有 多 个 值 且 使 用 “-" 号 连接 符 分 割 的 其 中 一 个 值 的 属性 选择 器 。 比 如 


多 
绢 


<i lang="en-us">HTML5</i> 


将 不 同 的 选择 器 进行 组 合 形成 新 的 特定 匹配 ， 我 们 称 为 复合 选择 器 。 


1.* 分 组 选择 器 ** 


p,b,i,span { color: red; 


解释 : 将 多 个 选择 器 通过 过 号 分 割 ， 同 时 设置 一 组 样式 。 当 然 ， 不 但 可 以 分 组 元 素 选 择 器 ， 
还 可 以 使 用 ID 选择 器 、 类 选择 器 、 属 性 选择 器 混合 使 用 。 


2.+ 后 代 选 择 器 ** 


pb { color: red; 


部 所 有 <b> 元 素 。 不 在 乎 <b> 的 层次 深度 。 当 然 ， 后 代 选 择 器 也 可 以 混 


ul > 1i { border: 1px solid red 


<ul> 
<1i> 我 是 儿子 <01> 
<1i> 我 是 孙子 </1i> 
<1i> 我 是 孙子 </1i> 
</o01> 
</1i> 
<1i> 我 是 儿子 </1i> 
<1i> 我 是 儿子 </1i> 
</ul> 


解释 : 子 选择 器 类 似 与 后 代 选 择 器 ， 而 最 大 的 区 别 就 是 子 选择 器 只 能 选择 父 元 素 向 下 一 级 的 
元 素 ， 不 可 以 再 往 下 选择 。 


4.* 相 邻 兄弟 选 择 器 ** 


p+b { color: red; 


} 


解释 : 相 邻 兄弟 选择 器 匹配 和 第 一 个 元 素 相 邻 的 第 二 个 元 素 。 


5. 咏 普通 兄弟 选择 器 


p ~bt{tcolor: red; 


解释 : 普通 兄弟 选择 器 匹配 和 第 一 个 元 素 后 面 的 所 有 元 素 。 


三 ， 伪 元 素 选 择 器 

伪 选 择 器 分 为 两 种 第 一 种 是 下 节 伪 类 选择 器 ， 还 有 一 种 就 是 伪 元 素 选择 器 。 这 两 种 选择 器 特 
性 上 比较 容易 混淆 ， 在 CSS3 中 为 了 区 分 ， 伪 元 素 前 置 两 个 冒号 (::) ， 伪 类 前 置 一 个 冒号 
(:) 。 


1.::first-line 块 级 首 行 


::first-line { color: red; 


} 
解释 : 块 级 元 素 比 如 <p>、<div> 等 的 首 行文 本 被 选 定 。 如 果 想 限定 菜 种 元 素 ， 可 以 加 上 前 置 
p::first-line。 


2.::first-letter 块 级 首 字母 


::first-letter { color: red; 


} 


解释 : 块 级 元 素 的 首 行 字母 。 
3.::before 文本 前 插入 


a::before { content: ' 点 击 -'， 


} 


解释 : 在 文本 前 插入 内 容 。 
4.::after 文本 后 插入 


a::before { content: '- 请 进 '， 


} 


解释 : 在 文本 后 插入 内 容 。 


第 14 章 CSS 颜色 与 度量 单位 


学 习 要 点 : 

1. 颜 色 表 方案 
2. 度 量 单位 

主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 颜色 和 度量 单位 等 问题 ， 包 括 上 颜色 的 选取 方式 、 相 对 长 度 和 绝 
对 长 度 等 。 
一 颜色 表 方案 


颜色 的 表现 形式 主要 有 三 种 方式 : 闫 色 名 称 、 十 六 进 制 代码 和 十 进 制 代码 。 


p { color: red; 


解释 : 这 是 将 一 个 段落 内 的 文字 设置 为 红色 ， 采 用 的 是 英文 凑 色 名 称 。 问 题 是 ， 其 他 各 种 闫 
色 我 们 将 如 何 设置 ? 
在 古老 的 HTML4 时 ， 顾 色 名 称 只 有 16 种 。 


项 色 名 称 十 六 进 制 代码 十 进 制 代码 含 》 
black #000000 0,0,0 黑色 
silver #cO0cOcO 192,192,192 银灰 色 
gray #808080 128,128,128 灰色 
white #ffFFFf 255 取 55255 白色 
maroon #800000 128,0,0 栗色 
red #ff0000 25500 红色 
purple #800080 128,0,128 紫色 
fuchsia #ffOOff 2550255 紫红 
green #008000 0,128,0 绿色 
lime #00ff00 02550 闪光 绿 
olive #808000 128,128,0 橄榄 色 
yellow #ffff00 255,255,0 黄色 
navy #000080 0,0,128 海军 蓝 
blue #0000ff 00255 蓝 色 
teal #008080 0,128,128 水 鸭 色 
aqua #Ooffff 0,255,255 浅 绿色 

当然 ， 目 前 颜色 名 称 远 远 不 止 这 些 ， 可 以 搜索 更 多 的 HTML 颜色 表 或 CSS 颜色 表 查 阅 。 这 里 


提供 一 些 页 


页 面 如 下 : 


http://xh.5156edu.com/page/z1015m9220j18754.html 


http://finle.me/colors.html 


http://www.w3school.com.cn/tags/html_ref_colornames.asp 


在 上 面 的 表格 中 ， 我 们 也 罗列 出 对 应 的 十 六 进 制 和 十 进 制 颜色 表示 方法 。 使 用 方法 如 下 : 


// 红 色 的 十 六 进 制 方案 


p { color: #ff0000; 
} 


进 制 表 示 方 法 就 比较 多 样 化 ， 有 四 种 方案 : 


函数 说 明 
rgb(r,g,b) 用 RGB 模型 表示 颜色 
rgba(r,g,b,a) 同上 ，a 表示 透明 度 0~1 之 间 


用 HSL 模型 (色相 、 饱 和 度 和 透明 度 ) 来 
表示 顾 色 


hsla(h,s,l,a) 同上 ，a 表示 透明 度 0~1 之 间 


hsl(h,s,l) 


示例 
rgb(0,128,128) 
rgba(0,128,128,0.5) 


hsl(120,100%,30%) 


hsla(120,100%,30%,0.5) 


p { color: rgb(112, 128, 114); color: rgba(0, 128, 128, 0.5); color: hsl(120, 100%, 30%); 


贺 





目前 又 有 一 个 疑问 ， 这 些 值 从 哪里 获取 。 除 了 颜色 表 之 外 ， 想 要 微调 自己 的 颜色 值 。 我 们 可 


以 使 用 photoshop 等 平面 设计 软件 的 调 色 板 获取 相应 的 值 。 





二 . 度量 单位 


在 CSS 长 度 设置 中 ， 我 们 经 常 需 要 使 用 到 度量 单位 ， 即 以 什么 样 的 单位 设计 我 们 的 字体 或 边 


框 长 度 。 而 在 CSS 中 长 度 单 位 又 分 为 绝对 长 度 和 相对 长 度 。 


绝对 长 度 指 的 是 现实 世界 的 度量 单位 ，CSS 支持 五 种 绝对 长 


度 单 位 。 
绝对 长 度 单位 
单位 标识 符 说 明 
in 英寸 
cm 厘米 
mm 毫米 
pt 磅 
PC pica 
相对 长 度 指 的 是 依托 其 他 类 型 的 单位 ， 也 是 五 种 。 
相对 长 度 单位 
单位 标识 符 说 明 
em 与 元 素 字 号 挂 多 
2 与 元 素 字体 的 "x 高 
度 " 挂 钧 
rem 与 根 元 素 的 字号 挂 钧 
px 像素 ， 与 分 辩 率 挂钩 
% 相对 另 一 值 的 百分比 


下 面 我 们 使 用 一 些 常用 的 单位 作为 演示 ， 而 不 做 演示 的 基本 用 不 到 了 。 
/lem 相对 单位 


p { margin: 0; padding: 0; background: silver; font-size: 15px; height: 2em; 


解释 : em 是 相对 单位 ， 与 字号 大 小 挂钩 ， 会 根据 字体 大 小 改变 自己 的 大 小 ， 灵 活性 很 高 


/px 相对 单位 ， 绝 对 特性 
p { margin: 0; padding: 0; background: silver; font-size: 15px height: 55px; 
} 


解释 : 虽然 px 也 是 相对 单位 ， 但 由 于 和 分 辩 率 挂 钓 ， 导 致 他 其 实 就 变 成 一 个 绝对 单位 了 ， 自 
然 灵活 性 没有 em 高 ， 但 是 使 用 难度 较 低 ， 且 大 量 的 开发 者 习惯 性 使 用 它 。 


//% 百 分 比 


p { margin: ©0; padding: 0; background: silver; font-size: 200%; width: 50%; 


解释 : 长 度 比较 好 理解 ， 就 是 挂 钧 它 所 在 区 块 的 宽度 。 而 font-size 则 是 继承 到 的 原始 大 小 的 
百分比 。 


第 15 章 CSS 文本 样式 [上 ] 


学 习 要 点 : 
1. 字 体 总 汇 
2. 字 体 设 置 


3.Web 字体 


主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 文本 样式 ， 通 过 文本 样式 的 设置 ， 更 改 字体 的 大 小 、 样 式 以 及 


文本 的 方位 。 


一 :字体 总 汇 


本 节 课 ， 我 们 重点 了 解 一 下 CSS 文本 样式 中 字体 的 一 些 设置 方法 ， 样 式 表 如 下 : 


属性 名 
font-size 
font-variant 
font-style 
font-weight 
font-family 
font 


@font-face 


二 . 字体 设置 


说 明 


a 
他 
Py 


访 


英文 字体 是 否 转换 为 小 型 大 写 


下 让 
书 
代 
A 
区 
~ 
p= 
E> 


3 
3 
中 
并 


小 


字体 样式 复合 写法 
eb 字体 


凑 六 
两 两 网 两 本 网 珊 
中 
借 
加 
人 
Se 
次 


三 


总 


我 们 可 以 通过 CSS 文本 样式 来 修改 字体 的 大 小 、 样 式 以 及 形态 。 


1.font-size 


p { font-size: 5S5Opx; 


} 


解释 : 设置 文本 的 大 小 。 属 性 值 如 下 表 : 


CSS 版 本 


李 炎 恢 HTML CSS JavaScript PHP Bootstrap 教程 


设置 字体 大 小 。 每 个 值 从 小 到 大 的 固定 值 。 


rl 
设置 字体 相对 于 父 元 素 字体 的 大 小 

使 用 CSS 像素 长 度 设置 字体 大 小 

使 用 相对 于 父 元 素 字体 的 百分比 大 小 


// 先 设置 父 元 素 字 体 大 小 


body { font-size: 50px; 


// 再 设置 相对 小 一 些 


p { font-size: Smaller 


} 


2.font-variant 


p { font-variant: small-caps; 


} 


解释 : 设置 字体 是 否 以 小 型 大 写字 母 显示 。 


值 说 明 
normal 表示 如 果 以 小 型 大 写 状 态 ， 让 它 恢复 小 写 状态 。 
small-caps 让 小 写字 母 以 小 型 大 写字 母 显示 。 


// 先 让 父 元 素 设 置 小 型 大 写 


body { font-variant: small-caps,; 


// 让 子 元 素 设 置 恢复 小 写 
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p { font-size: 50px; font-variant: normal; 


} 


3.font-style 


p { font-style: italic,; 
} 


解释 : 设置 字体 是 否 倾斜 。 


值 说 明 
normal 表示 让 倾斜 状态 恢复 到 正常 状态 。 
italic 表示 使 用 斜体 。 
oblique 表示 让 文字 倾 儿 。 区 别 在 没有 斜体 时 使 用 。 


p { font-weight: bold; 
} 


解释 : 设置 字体 是 否 加 粗 。 


值 说 明 
normal 表示 让 加 粗 的 字体 恢复 正常 。 
bold 粗 体 
bolder 更 粗 的 字体 
lighter 轻 细 的 字体 
100 ~ 900 之 间 的 数字 600 及 之 后 是 加 粗 ， 之 前 不 加 粗 


在 目前 计算 机 和 浏览 器 显示 中 ， 只 有 bold 加 粗 ， 其 他 更 粗 更 细 ， 目 前 体现 不 出 来 。 
5.font-family 


p { font-family: 微软 雅 黑 ; 
} 


解释 : 使 用 指定 字体 名 称 。 这 里 使 用 的 字体 是 浏览 者 系统 的 字体 。 有 时 为 了 兼容 很 多 浏览 者 
系统 的 字体 ， 可 以 做 几 个 后 备 字 体 。 


// 备 用 字体 


p { font-family: 楷体 ,微软 雅 黑 ， 宋体 ; 
} 


6.font 


p { font: 50px 楷体 ; 
} 


解释 : 字体 设置 简写 组 合 方式 。 格 式 如 下 : [是 否 倾斜 | 是 否 加 粗 | 是 否 转 小 型 大 写 ] 字体 大 小 字 
体 名 称 : 


三 . Web™ 字体 


虽说 可 以 通过 备用 字体 来 解决 用 户 端 字体 缺失 问题 ， 但 终究 用 户 体验 不 好 ， 且 不 一 定 备用 字 
体 所 有 用 户 都 安装 了 。 所 以 ， 现 在 CSS 提供 了 Web 字体， 也 就 是 服务 器 端 字体 。 


// 服 务 器 提供 字体 


@font-face { font-family: abc; src: url('BrushscriptStd.otf'); 
} p { font-size: S50Opx; font-family: abc; 
} 


英文 字体 文件 比较 小 ， 而 中 文 则 很 大 。 所 以 ， 中 文 如 果 想 用 特殊 字体 可 以 使 用 图 片 。 大 面积 
使 用 特殊 中 文字 体 ， 就 不 太 建议 了 。 


第 15 章 CSS 文本 样式 [下 ] 


学 习 要 点 : 
1. 文 本 总 汇 
2. 文 本 样式 
3. 文 本 控制 


主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 文本 样式 ， 通 过 文本 样式 的 设置 ， 更 改 字体 的 大 小 、 样 式 以 及 


文本 的 方位 。 


文本 总 汇 


本 节 课 ， 我 们 重点 了 解 一 下 CSS 文本 样式 中 文本 内 容 的 一 些 设置 方法 ， 样 式 表 如 下 : 


属性 名 
text-decoration 
text-transform 
text-shadow 
text-align 
white-space 
letter-spacing 
word-spacing 
line-height 
word-wrap 


text-indent 


二 .文本 样式 


CSS 文本 样式 有 三 种 : 文本 装饰 、 美 文大 小 写 转 换 和 文本 阴影 。 


1.text-decoration 


说 明 


装饰 文本 出 现 各 种 划 线 。 
将 英文 文本 转换 大 小 写 。 


给 文本 添加 阴影 
设置 文本 对 齐 方式 
排版 中 的 空白 处 理 方式 
设置 字母 之 间 的 间距 
单词 之 间 的 间距 


设 


p { text-decoration: underline; 


解释 : 设置 文本 出 现下 划 线 。 属 性 值 如 下 表 : 


CSS 版 本 


值 说 明 


none 让 本 身 有 划 线 装饰 的 文本 取消 掉 
underline 让 文本 的 底部 出 现 一 条 下 划 线 
overline 让 文本 的 头 部 出 现 一 条 上 划 线 
line-through 让 文本 的 中 部 出 现 一 条 删除 划 线 
blink 让 文本 进行 闪烁 ， 基 本 不 支持 了 


/让 本 来 有 下 划 线 的 超 链接 取消 


a { text-decoration: none; 


} 


2.text-transform 


p { text-transform: Uppercase 


} 


解释 : 设置 英文 文本 转换 为 大 小 写 。 


值 说 明 
none 将 已 被 转换 大 小 写 的 值 恢复 到 默认 状态 
capitalize 将 英文 单词 首 字母 大 写 
uppercase 将 英文 转换 为 大 写字 母 
lowercase 将 英文 转换 为 小 写字 母 

3.text-shadow 


p { text-shadow: Spx Spx 3px black; 
} 


解释 : 给 文本 添加 阴影 。 其 中 四 个 值 ， 第 一 个 值 : 水 平 偏 移 ; 第 二 个 值 : 重 直 偏 移 ; 第 三 个 
值 : 阴影 模糊 度 (可 选 ) ; 第 四 个 值 : 阴影 颜色 (可 选 ) 。 


* 文本 控制 


hn 


1.text-align 


p { text-align: center,; 


} 


解释 : 指定 文本 的 对 齐 方式 。 


值 说 明 
left 靠 左 对 齐 ， 默 认 
right 靠 右 对 齐 
center 居中 对 齐 
justify 内 容 两 端 对 齐 
start 让 文本 处 于 结束 的 边界 
end 让 文本 处 于 结束 的 边界 


start 和 end 属于 CSS3 新 增 的 功能 ， 但 目前 IE 和 Opera 尚未 支持 。 


2.white-space 


p { white-space: nowrap ; 


} 


解释 : 处 理 空白 排版 方式 。 


值 
normal 默认 值 ， 空 白 生 
nowrap 空白 符 被 压缩 
pre 空白 符 被 保留 
pre-line 空白 符 被 压缩 
pre-wrap 空白 符 被 保留 
3.letter-spacing 


p { letter-spacing: 4px; 
} 


解释 : 设置 文本 之 问 的 间距 。 


值 
normal 


长 度 值 


4.word-spacing 


说 明 


竺 被 压缩 ， 文 本 自动 换行 


， 文 本 不 换行 

， 遇 到 换行 符 则 换行 

， 文本 会 在 排 满 或 遇 换 行 符 换 行 
， 文本 会 在 排 满 或 遇 换 行 符 换 行 


说 明 


设置 默认 间距 
比如 。 “数字 ”+“px” 


p { word-spacing: 14px 


解释 : 设置 英文 单子 之 间 的 间距 。 


值 说 明 
normal 设置 默认 间距 


长 度 值 比如 :“ 数 字 ”+“px” 
5.line-height 


p { line-height: 200%; 
} 


解释 : 设置 段落 行 高 


值 说 明 
normal 设置 默认 间距 
长 度 值 比如 :“ 数 字 ”+“px” 
数值 比如 : 1,2,3 
% 比如 : 200% 


6.word-wrap 


p { word-wrap: break-word; 


} 


解释 : 让 过 长 的 英文 单词 断 开 。 
值 


normal 单词 不 断 开 
break-word 断 开 单词 


7.text-indent 


p { text-indent: 20px; 
} 


解释 : 设置 文本 首 行 的 多 


说 明 
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normal 设置 默认 间距 


长 度 值 比如 : “数字 "ep 
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2. 元 素 内 边 距 

3. 元 素 外 边 距 

4. 处 理 溢出 

主讲 教师 : 李 炎 恢 

本 章 主要 探讨 HTML5 中 CSS 金 模型 ， 学 习 怎 样 了 解 元 素 的 外 观 配置 以 及 文档 的 整体 布局 。 
一 元素 尺寸 


CSS 使 模 型 中 最 基础 的 就 是 设置 一 个 元 素 的 尺寸 大 小 。 有 三 组 样式 来 配置 一 个 元 素 的 尺寸 大 
小 ， 样 式 表 如 下 : 


属性 值 说 明 CSS 版 本 

width auto、 长 度 值 或 百分比 设置 元 素 的 宽度 1 

height auto、 长 度 值 或 百分比 设置 元 素 的 高 度 1 
min-width auto、 长 度 值 或 百分比 设置 元 素 最 小 宽度 2 
min-height auto、 长 度 值 或 百分比 设置 元 素 最 小 高 度 2 
max-width auto、 长 度 值 或 百分比 设置 元 素 最 大 宽度 2 
max-height auto、 长 度 值 或 百分比 设置 元 素 最 大 高 度 2 
// 设 置 元 素 尺寸 


div { width: 200px; height: 200px; 
} 


解释 : 设置 元 素 的 固定 尺寸 。 


// 限 制 元 素 尺 寸 


div { min-width: 100px; min-height: 100px; max-width: 300px; max-height: 300px; 


解释 : 这 一 组 主要 是 应 对 可 能 动态 产生 元 素 尺寸 变 大 变 小 的 问题 ， 从 而 限制 它 最 大 和 最 小 的 


//auto 自 适应 


div { width: auto; height: auto; 
} 


解释 : auto 是 默认 值 ，width 在 auto 下 是 100% 的 值 ; height 在 auto 下 是 自 适应 。 


// 百 分 比方 式 


#a { background: silver; width: 200px; height: 200px; 
} #b { background: gray; width: 80%; height: 80%; 
} 


<div id="a"> 
<div id="b"> 我 是 htm15 </div> 
</div> 


解释 : 百分比 就 是 相对 于 父 元 素 长 度 来 衡 定 的 。 
二 :元素 内 边 距 
CSS 盒 模 型 中 可 以 设置 元 素 内 部 边缘 填充 空白 的 大 小 ， 我 们 成 为 内 边 距 。 样 式 表 如 下 : 





属性 值 说 明 CSS 版 本 
padding-top 长 度 值 或 百分比 设置 顶部 内 边 距 
padding-bottom 长 度 值 或 百分比 设置 抵 部 内 边 距 1 
padding-left 长 度 值 或 百分比 设置 左边 内 边 距 4 
padding-right 长 度 值 或 百分比 设置 右边 内 边 距 1 
padding 1~4 个 长 度 值 或 百分比 简写 属性 1 

/设置 四 个 内 边 距 


div { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; 

} 
IE 
// 简 写 形式 ， 分 别 为 上 10px、 右 10px、 下 10px、 左 10px 


div { padding: 10px 10px 10px 10px; 


// 简 写 形式 ， 分 别 为 上 10px， 左 右 50px， 下 200px 


div { padding: 10px 50px 200px 


/简写 形式 ， 分 别 是 上 下 10px， 左 右 20px 


div { padding: 10px 20px; 
} 


// 简 写 形式 : 上 下 左右 均 10px 


div { padding: 10px; 


三 :元 素 外 边 距 


CSS 使 模 型 中 可 以 设置 元 素 外 部 边缘 填充 空白 的 大 小 ， 我 们 成 为 外 边 距 。 样 式 表 如 下 : 





属性 值 说 明 CSS 版 本 
margin-top 长 度 值 或 百分比 设置 顶部 内 边 距 1 
margin-bottom 长 度 值 或 百分比 设置 底部 内 边 距 1 
margin-left 长 度 值 或 百分比 设置 左边 内 边 距 1 
margin-right 长 度 值 或 百分比 设置 右边 内 边 距 1 
margin 1~4 长 度 值 或 百分比 简写 属性 1 

// 设 置 四 个 内 边 距 


div { margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; 
} 


// 简 写 形式 ， 分 别 为 上 10px、 右 10px、 下 10px、 左 10px 


div { margin: 10px 10px 10px 10px; 


// 简 写 形式 ， 分 别 为 上 10px， 左 右 50px， 下 200px 


div { margin: 10px 50px 200px; 


// 简 写 形式 ， 分 别 是 上 下 10px， 左 边 20px 


div { margin: 10px 20px; 


李 炎 恢 HTML CSS JavaScript PHP Bootstrap 教程 


/简写 形式 : 上 下 左右 均 10px 


div { margin: 10px; 


四 . 处 理 溢出 


当 设 置 了 元 素 固 定 尺寸 且 内 容 过 大 时 ， 就 会 出 现 溢出 的 问题 。 溢 出 主要 朝 两 个 方向 : 右 侧 和 


底部 。 我 们 可 以 通过 overflow 系列 样式 来 控制 它 。 


溢出 处 理 主要 有 四 种 处 理 值 : 





| 浏览 器 自行 处 理 汶 出 内 容 。 如 果 有 汶 出 内 容 ， 就 显示 滚动 条 ， 再 
则 就 不 显示 滚动 条 。 
如 果 有 溢出 的 内 容 ， 直 接 剪 掉 。 


不 管 是 否 涪 出 ， 都 会 出 现 滚动 条 。 但 不 同 平台 和 浏览 器 显示 方式 
scroll 不 同 


默认 值 ， 不 管 是 否 溢出 ， 都 显示 内 容 。 


// 设 置 溢出 为 auto 值 


div { overflow-x: auto; 
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3. 元 素 的 浮动 

主讲 教师 : 李 炎 恢 

本 章 主要 探讨 HTML5 中 CSS 盒 模 型 ， 学 习 怎 样 了 解 元 素 的 外 观 配置 以 及 文档 的 整体 布局 。 
一 元素 可 见 性 


使 用 visibility 属性 可 以 实现 元 素 的 可 见 性 ， 这 种 样式 一 般 可 以 配合 JavaScript 来 实现 效果 。 
样式 表 如 下 : 


.3 CSS 
, 吉 总 日 
属性 值 说 明 版 本 
visible 默认 值 ， 元 素 在 页 面 上 可 见 。 2 
RS : 元 素 不 可 见 ， 但 会 
visibility hidden 占据 空间 。 2 


元 素 不 可 见 ， 隐 藏 表格 的 行 与 列 ， 如 果 不 是 


表格 ， 则 和 hidden 一 样 。 2 


collapse 


// 设 置 元 素 隐 藏 ， 但 占 位 


div { visibility: hidden; 


// 隐 藏 表格 的 行 或 列 ， 但 不 占 位 ，Chrome 和 Opera 不 支持 


table tr:first-child { visibility: collapse; 


CSS 盒 模型 中 的 display 属性 ， 可 以 更 改元 素 本 身 盒 类 型 。 那 么 元 素 有 哪些 盒 类 型 呢 ? 主要 
有 : 1. 块 级 元 素 (区 块 ) ; 2 行内 元 素 (内 联 ) ;3 行内 - 块 级 元 素 (内 联 块 ) ; 4. 隐藏 元 素 。 


1.** 块 级 元 素 ** 


所 谓 块 级 元 素 ， 就 是 能 够 设置 元 素 尺 寸 、 隔 离 其 他 元 素 功 能 的 元 素 。 比 如 : <div>、<p> 等 文 
档 元 素 。 


2.xx* 行 内 元 于 和 


所 谓 行内 元 素 ， 不 能 够 设置 元 素 尺寸 ， 它 只 能 自 适 应 内 容 、 无 法 隔离 其 他 元 素 ， 其 它 元 素 会 
紧 跟 其 后 。 比 如 : <span>、<b> 等 文本 元 素 。 


3.** 行 内 - 块 元 素 ** 


所 谓 行 内 - 块 元 素 ， 可 以 设置 元 素 尺 寸 ， 但 无 法 隔离 其 他 元 素 的 元 素 。 比 如 <img> 。 


属性 值 说 明 CSS 版 本 
block 盒子 为 块 级 元 素 1 
display inline 盒子 为 行内 元 素 1 
inline-block 盒子 为 行内 - 块 元 素 2 
none 全 1 
// 将 行内 元 素 转 成 块 级 元 素 


span { background: silver; width: 200px height: 200px; display: block 


// 将 块 级 元 素 转换 成 行内 元 素 


div { background: silver; width: 200px; height: 200px; display: inline; 
} 


// 将 块 级 元 素 转化 成 行内 - 块 元 素 


div { background: silver; width: 200px; height: 200px; display: inline-block; 
} 


// 将 元 素 隐藏 且 不 占 位 


div { display: none 


display 属性 还 有 非常 多 的 值 ， 有些 后 面部 分 讲解 ， 而 有 些 支 持 度 不 好 或 者 尚 不 支持 ， 从 而 省 
略 。 有 兴趣 的 ， 可 以 参考 CSS3 手册 。 


三 元 素 的 浮动 


CSS 金 模型 有 一 种 叫 浮动 金 ， 就 是 通过 float 属性 建立 盒子 的 浮动 方向 ， 样 式 表 如 下 : 


属性 值 说 明 CSS 版 本 


left 浮动 元 素 靠 左 1 
float right 浮动 元 素 靠 右 1 
none 禁用 浮动 1 


// 实 现 联 排 效 果 


#a { background: gray; float: left; 

} #b { background: maroon; float: left; 
} #c { background: navy; float: left; 

} 


// 实 现 元 素 右 浮动 


#c { background: navy; float: right; 


// 取 消 元 素 的 浮动 


#c { background: navy; float: none; 


刚才 的 浮动 有 一 个 问题 : 当 一 个 元 素 盒 子 被 浮动 后 ， 下 面 的 元 素 会 自动 扒 壹 处理 ， 导 致 元 素 
不 可 见 或 部 分 不 可 见 。 我 们 可 以 使 用 clear 属性 来 处 理 。 


属性 值 说 明 CSS 版 本 
clear none 允许 两 边 均 可 浮动 1 
left 左边 界 不 得 浮动 | 
right 右边 界 不 得 浮动 1 
both 两 边 都 不 得 浮动 1 
// 两 边 均 不 可 浮动 


#c { background: navy; clear: both; 
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学 习 要 点 : 
1. 声 明 边 框 
2. 边 框 样式 
3. 圆 角 边 框 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 边框 和 背景 ， 通 过 边框 和 背景 的 样式 设置 ， 给 元 素 增加 更 丰富 
的 外 观 。 


一 :声明 边框 


边框 的 声明 有 三 个 属性 设置 ， 样 式 表 如 下 : 


属性 值 说 明 CSS 版 本 
border-width 长 度 值 设置 边框 的 宽度 ， 可 选 1 
border-style 样式 名 称 设置 边框 的 样式 ， 必 选 1 
border-color 颜色 值 设置 边框 的 颜色 ， 可 选 1 
这 三 个 属性 值 ， 只 有 border-style 是 必须 声明 ， 才 可 以 出 现 边 框 。 而 其 他 两 个 属性 会 出 现 默认 
值 。 


// 最 简单 的 边框 ， 边 框 长 度 默 认 3px， 边 框 颜色 为 黑色 


div { border-style: solid; 


// 配 置 完整 的 边框 


div { border-style: solid; border-width: 2px; border-color: red; 


} 


如 果 元 素 长 和 高 均 为 200px 时 ， 四 个 边框 均 为 2 时 ， 元 素 的 长 高 总 尺寸 均 为 202px。 
二 边框 样式 


边框 的 样式 主要 有 三 种 ， 分 别 是 边框 长 度 取 值 、 边 框 的 颜色 和 边框 的 线条 类 型 。 磊 色 是 通用 
的 颜色 代码 ， 和 所 有 其 他 颜色 取 值 一 下 。 而 长 度 和 线条 类 型 ， 边 框 有 自己 独到 的 部 分 。 


边框 宽度 取 值 表 如 下 : 


值 说 明 
长 度 值 CSS 长 度 值 : 比如 px、em 等 


百分数 直接 设置 百分数 :1、2、3 等 
thi 使 用 长 度 名 称 的 预 设 宽 度 。 这 三 个 值 的 具体 意义 由 浏览 器 来 定义 ， 从 小 到 大 
| 
依次 增 大 。 
medium 
thick 


一 般 来 说 ， 边 框 为 了 更 加 精准 ， 还 要 计算 元 素 盒子 的 总 尺寸 ， 使 用 长 度 值 的 比较 多 。 而 定义 
边框 线条 的 样式 如 下 样式 表 : 


值 说 明 

none 没有 边框 

dashed 破 折线 边框 

dotted 点 线 边 框 

double 双 线 边框 

groove 楼 线 边 杠 

inset 使 元 素 内 容 具 有 内 贬 效 果 的 边框 
outset 使 元 素 内 容 具 有 外 凹 效果 的 边框 
ridge 辱 线 边 框 

solid 实 线 边 框 


//solid 实 线 使 用 频率 最 高 


div { border-style: solid; border-width: 10px; border-color: red 
} 


如 果 想 对 四 条 边 中 某 一 条 边 单独 进行 设置 ， 可 以 使 用 如 下 样式 表 : 


属性 说 明 CSS 版 本 
border-top-width 定义 顶端 1 
border-top-style 
border-top-color 
border-middle-width 定义 底部 1 
border-middle-style 
border-middle-color 
border-left-width 定义 左 侧 1 
border-left-style 
border-left-color 
border-right-width 定义 右边 1 
border-right-style 


border-right-color 
// 只 设置 顶端 


div { border-top-style: solid; border-top-width: 10px; border-top-color: red; 
} 


如 果 四 条 变 都 一 致 ， 那 么 没 必要 分 写成 三 名 样式 ， 直 接 通 过 简写 即 可 : 


属性 值 说 明 CSS 版 本 
border < 宽度 > < 样式 > < 颜色 > 设置 四 条 边 的 边框 1 
border-top 只 设置 上 边框 
border-middle 只 设置 下 边框 
border-left 只 设置 左边 框 
border-right 只 设置 右边 框 


// 简 写 形式 四 条 边 设 置 


div { border: 10px Solid red; 
} 


三 圆 角 边框 


CSS3 提供 了 一 个 非常 实用 的 圆 角 边框 的 设置 。 使 用 border-radius 属性 ， 就 可 以 达到 这 种 效 
果 ， 样 式 表 如 下 : 


属性 
border-radius 
border-top-left-radius 
border-top-right-radius 
border-middle-left-radius 


border-middle-right-radius 


/设置 圆 角 拢 形 


值 
长 度 值 或 百分数 
长 度 值 或 百分数 
长 度 值 


溺 


证 
洱 
EY 
到 | 至 | 到 | 怠 | 到 
心 > 
> 
沦 


林 
泪 . 
EY 
名 
交 


div { border: 10px solid red; border-radius: 10px; 


} 


// 四 条 边 分 别 设置 


说 明 
四 条 边 角 
左上 边 角 
右上 边 角 
左下 边 角 
右 下 边 角 


div { border: 10px solid red; border-radius: 10px 20px 30px 40px; 


} 


OOIOWIW|O 
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第 17 章 CSS 边框 与 背景 [下 ] 


学 习 要 点 : 
1. 设 置 背 景 
主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 CSS 边框 和 背景 ， 通 过 边框 和 背景 的 样式 设置 ， 给 元 素 增加 更 丰富 
的 外 观 。 


一 :设置 背景 


使 模型 的 尺寸 可 以 通过 两 种 方式 实现 可 见 性 ， 一 种 就 是 之 前 的 边框 ， 还 有 一 种 就 是 背景 。 
CSS 背景 设置 的 样式 表 如 下 : 


属性 说 明 CSS 版 本 
background-color 背景 的 颜色 1 
background-image 背景 的 图 片 1/3 
background-repeat 背景 图 片 的 样式 1/3 
background-size 背景 图 像 的 尺寸 3 
background-position 背景 图 像 的 位 置 1 
background-attachment 背景 图 片 的 滚动 1/3 
background-clip 背景 图 片 的 裁剪 3 
background-origin 背景 图 片 起 始点 3 
background 背景 图 片 简写 方式 1 

1.background-color 
值 说 明 CSS 版 本 
颜色 设置 背景 颜色 为 指定 色 1 
transparent 设置 背景 闫 色 为 透明 色 1 


div { background-color: silver; 


解释 : 设置 元 素 的 背景 颜色 。 属 性 值 是 颜色 值 。 


div b { background-color: transparent ; 


} 


解释 : 默认 值 为 transparent， 为 透明 的 意思 。 这 样 <div> 内 部 的 元 素 就 会 继承 <div> 的 背景 
色 。 一 般 来 说 这 个 属性 使 用 频率 很 低 ， 原 因 是 不 需要 改变 色彩 时 就 默认 ， 需 要 改变 色彩 时 又 
是 颜色 值 。 


body { background-color: Silver ; 


解释 : 在 <body> 元 素 下 可 以 设置 整个 页 面 的 背景 色 。 


2.background-image 


值 说 明 CSS 版 本 
none 取消 背景 图 片 的 设置 1 
Url 通过 URL 设置 背景 图 片 1 


body { background-image: url(loading.gif); 
} 

解释 : Url 里 面 是 图 片 的 路 径 ， 设 置 整个 页 面 以 这 个 图 片 为 背景 ， 如 果 图 片 不 足以 覆盖 ， 则 复 
制 扩 展 。 


div { background-image: none; 


} 


解释 : 如 果 多 个 div 批量 设置 了 背景 ， 而 其 中 某 一 个 不 需要 背景 ， 可 以 单独 设置 none 值 取消 


背景 


池 


0° 


在 CSS3 中 ， 背 景 图 片 还 设置 了 比如 线性 、 放 射 性 等 渐变 方式 。 但 由 于 支持 度 的 问题 ， 比 如 
IE9 尚未 支持 。 我 们 把 这 些 的 新 特性 放 到 独立 的 课程 中 讲解 。 


3.background-repeat 


值 说 明 CSS 版 本 
repeat-x 水 平方 向 平 铺 图 像 1 
repeat-y 重 直 方向 平 铺 图 像 1 
repeat 水 平和 垂直 方向 同时 平 铺 图 像 1 


no-repeat 禁止 平 铺 图 像 | 


body { background-image: url(loading.gif); background-repeat: no-repeat 


解释 : 让 背景 图 片 只 显示 一 个 ， 不 平 铺 。CSS3 还 提供 了 两 个 值 ， 由 于 支持 度 不 佳 ， 这 里 忽 
略 。 


4.background-position 





值 说 明 CSS 版 本 
top 将 背景 图 片 定位 到 元 素 顶 部 1 
left 将 背景 图 片 定位 到 元 素 左 部 1 
right 将 背景 图 片 定位 到 元 素 右 部 1 
bottom 将 背景 图 片 定位 到 元 素 底部 1 
center 将 背景 图 片 定位 到 元 素 中 部 1 
长 度 值 使 用 长 度 值 偏 移 图 片 的 位 置 | 
百分数 使 用 百分数 偏 移 图 片 的 位 置 1 


body { background-image: url(loading.gif); background-repeat: no-repeat; background-posit 


图 


解释 : 将 背景 图 片 置 于 页 面 上 方 ， 如 果 想 置 于 左上 方 则 值 为 : top left。 





body { background-image: url(loading.gif); background-repeat: no-repeat; background-posit 


了 a 


解释 : 使 用 长 度 值 或 百分数 ， 第 一 值 表 示 左 边 ， 第 二 个 值 表 示 上 边 。 





5.background-size 
值 说 明 Be 
auto 默认 值 ， 图像 以 本 尺寸 显示 3 
cover 等 比例 缩放 图 像 ， 使 图 像 至 少 覆 盖 容 器 ， 但 有 可 能 超出 容器 @ 
| 其 宽 前 、 高 EE 站 与 突 双 铅 或 纵 个 
contain 党 放 图 像 ， 使 其 帘 高 度 中 较 大 者 与 容器 横向 或 纵向 重 
长 度 值 CSS 长 度 值 ， 比 如 px、em 3 


百分数 比如 : 100% 3 


body { background-image: url(loading.gif); background-size: cover; 


解释 : 使 用 cover 相当 于 100%， 全 屏 铺面 一 张大 图 ， 这 个 值 非常 实用 。 在 等 比例 放大 缩小 的 
过 程 中 ， 可 能 会 有 背景 超出 ， 当 然 ， 这 点 无 伤 大 雅 。 


div { background-image: url(loading.gif); background-size: contain; 


解释 : 使 用 contain 表示 ， 尽 可 能 让 图 片 完 整 的 显示 在 元 素 内 。 


body { background-image: url(loading.gif); background-size: 240px 240px; 
} 


解释 : 长 度 值 的 用 法 ， 分 别 表示 长 和 高 。 


6.background-attachment 


值 说 明 CSS 版 本 
scroll 默认 值 ， 背 景 固定 在 元 素 上 ， 不 会 随 着 内 容 一 起 深 动 1 
fixed 景 固定 在 视窗 上 ， 内 容 深 动 时 背景 不 动 1 


body { background-image: url(loading.gif); background-attachment: fixed; 
} 


解释 : fixed 属性 会 导致 背景 产生 水 印 效 果 ， 拖 动 滚动 条 而 背景 不 动 。 


7.background-origin 


值 说 明 CSS 版 本 
border-box 在 元 素 盒 子 内 部 绘制 背景 3 
padding-box 在 内 边 距 盒子 内 部 绘制 背景 3 
content-box 在 内 容 盒子 内 部 绘制 背景 3 


div { width: 400px; height: 300px; border: 10px dashed red; padding: 50px; background-ima 
} 


Me 





解释 : 设置 背景 起 始 位 置 。 


8.background-clip 


值 说 明 CSS 版 本 


border-box 在 元 素 盒子 内 部 裁剪 背景 3 
padding-box 在 内 边 距 盒子 内 部 裁剪 背景 8 
content-box 在 内 容 黑 子 内 部 裁剪 背景 3 


div { width: 400px; height: 300px; border: 10px dashed red; padding: 50px; background-ima 
} 


让 要 








解释 : 在 内 边 距 金子 内 部 裁剪 背景 。 
9.background 


div { width: 400px; height: 300px; border: 10px dashed red; padding: 50px; background: si 
} 


IE 


解释 : 完整 的 简写 顺序 如 下 : 





[background-color] 

[background-imagel] 
[background-repeat] 
[background-attachment] 
[background-position]/[background-size] 
[background-origin] 


[background-clip] 
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第 18 章 CSS 表格 与 列表 


学 习 要 点 : 
1. 表 格 样式 
2. 列 表 样式 
3. 其 他 功能 


主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 表格 和 列表 ， 通 过 表格 和 列表 的 样式 设置 ， 让 表格 和 列表 显 


更 加 多 元 化 。 
一 . 表格 样式 
表格 有 五 种 独 有 样式 ， 样 式 表 如 下 : 


边框 样式 | 相 邻 单元 格 的 边框 样式 2 
长 度 值 ”| 相 邻 单元 格 边框 的 间距 


empty-cells 显示 值 空 单元 格 是 否 显 示 边 框 
table-layout 布局 样式 ”| 指定 表格 的 布局 样式 


1.border-collapse 


“局 





table { border-collapse: collapse; 





解释 : 单元 格 相 邻 的 边框 被 合并 。 


2.border-spacing 
值 说 明 
长 度 值 0 表示 间距 ， 其 他 使 用 CSS 长 度 值 
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table { border-spacing: 10px; 
} 


解释 : border-collapse: separate; 的 状态 下 才 有 效 。 因 为 要 设置 间距 ， 不 能 合并 。 


3.caption-side 


值 说 明 CSS 版 本 
top 默认 值 ， 标 题 在 上 方 2 
bottom 标题 在 下 方 2 


table { table-layout: fixed; 


4.empty-cells 


值 说 明 CSS 版 本 
show 默认 值 ， 显 示 边 框 2 
hide 不 显示 边框 2 


table { empty-cells: hide; 
} 


解释 : 单元 格 内 容 为 空 是 隐藏 边框 。 


5.table-layout 


值 说 明 CSS 版 本 
auto 默认 值 ， 内 容 过 长 时 ， 拉 伸 整 个 单元 格 2 
fixed 内 容 过 长 时 ， 不 拉 伸 整个 单元 格 2 


table { table-layout: fixed; 
} 


解释 : 内 容 过 长 后 ， 不 会 拉 伸 整个 单元 格 。 
二 ， 列表 样式 
列表 有 四 种 独 有 样式 ， 样 式 表 如 下 : 
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list-style-type 
list-style-image 图 像 作 为 列表 标记 
list-style-position 排列 的 相对 位 置 





1.list-style-type 





upper-roman 大 写 英文 字母 


ul { list-style-type: Square 


解释 : 列表 前 级 的 标记 类 型 ， 这 里 是 CSS1 版 本 的 。CSS2 版 本 还 包 


数字 、 希 腊 文 等 前 级 。 有 兴趣 的 可 以 参考 CSS 手册 。 


2.list-type-position 


值 说 明 
outside 默认 值 ， 标 记 位 于 内 容 框 外 部 
inside 标记 位 于 内 容 框 内 部 


ul { width: 120px; list-style-position: inside; 
} 


解释 : 标记 位 于 内 容 框 的 内 部 。 


3.list-type-image 
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值 说 明 CSS 版 本 
none 不 使 用 图 像 1 
Url 通过 Url 使 用 图 像 1 


ul { list-style-image: url(bullet.png); 
} 


解释 : 使 用 图 片 作为 前 级 的 标记 。 
4.list-style 


ul { list-style: lower-alpha inside url(bullet.png); 


解释 : 简写 形式 。 
三 .其 他 功能 


在 <table> 中 <td> 单 元 格 ， 我 们 可 以 使 用 text-align 属性 水 平 对 齐 ， 但 是 牌 直 对 齐 就 无 法 操作 
了 。CSS 提供 了 vertical-align 属性 用 于 垂直 对 齐 。 


值 说 明 CSS 版 本 
baseline 内 容 对 象 与 基线 对 齐 1 
top 内 容 对 象 与 顶端 对 齐 1 
middle 内 容 对 象 与 中 部 对 齐 1 
bottom 内 容 对 象 与 底部 对 齐 1 


table tr td { vertical-align: bottom; 


解释 : 将 单元 格 内 的 内 容 对 象 实现 重 直 对 齐 。 


值 说 明 CSS 版 本 
sub 垂直 对 齐 文本 的 下 标 1 
super 垂直 对 齐 文本 的 上 标 1 


b { vertical-align: Super 


解释 : 文本 上 下 标 设置 。 


值 说 明 
长 度 值 设置 上 下 的 偏 移 量 ， 可 以 是 负 值 
百分比 同上 


div span { vertical-align: -200px; 
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解释 : 负 值 往 下 ， 正 值 往 上 。 如 果 默 认 基 线 在 上 面 ， 用 负数 。 如 果 默 认 基 线 在 下 面 ， 用 正 


值 。 


第 19 章 CSS 其 他 样式 


学 习 要 点 : 

1. 颜 色 和 透明 度 
2. 盒 子 阴 影 和 轮廓 
3. 光 标 样式 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 其 他 剩 下 几 个 常用 的 样式 ， 包 括 闫 色 、 透 明度 、 盒 子 的 阴影 轮 
廉 以 及 光标 的 样式 。 


一 . 颜色 和 透明 度 


颜色 我 们 之 前 其 实 已 经 用 的 很 多 了 ， 比 如 字体 颜色 、 背 景 颜 色 、 边 框 颜 色 。 但 除了 背景 颜色 
和 边框 颜色 讲解 过 ， 字 体 顾 色 却 没有 系统 的 讲解 过 。 设 置 字 体 颜 色 其实 也 成 为 文本 块 的 前 景 
色 o 


属性 值 说 明 CSS 版 本 


color 颜色 值 设置 文本 前 景色 1 


解释 : 设置 文本 颜色 。 
CSS3 提供 了 一 个 属性 opacity， 可 以 设置 元 素 的 透明 度 。 
属性 值 说 明 CSS 版 本 


opacity 0~1 设置 元 素 的 透明 度 3 


p { color: red; opacity: 0.5; 
} 


解释 : 设置 元 素 的 透明 度 。 
二 . 盒子 阴影 和 轮廓 
1.box-shadow 


CSS3 提供 了 一 个 非常 实用 的 效果 样式 ， 就 是 阴影 效果 。 通 过 box-shadow 属性 来 实现 ， 样 式 
表 如 下 : 


李 炎 恢 HTML CSS JavaScript PHP Bootstrap 教程 


加 TWT 


hoffset 


voffset 


blur 
box-shadow 
四 


color 


阴影 的 水 平 偏 移 量 ， 是 一 个 长 度 
值 , 正 值 表 示 阴 影 向 右 偏 移 , 负 值 
表示 阴影 向 左 偏 移 。 

阴影 的 垂直 偏 移 量 ， 是 一 个 长 度 
值 , 正 值 代表 阴影 位 于 元 素 盒子 的 
下 方 , 负 值 代表 阴影 位 于 元 素 盒子 
上 用 二 

(可 选 ) 指定 模糊 值 , 是 一 个 长 度 
值 , 值 越 大 盒子 的 边界 越 模糊 。 默 
认 值 为 9， 边界 清晰 

(可 选 ) 指定 阴影 延伸 半径 , 是 一 
个 长 度 值 , 正 值 代 表 阴 影 向 盒子 各 
个 方向 延伸 扩大 , 负 值 代表 阴影 沿 
相反 方向 缩小 

(可 选 ) 设置 阴影 的 颜色 , 如 果 省 
略 ， 浏 览 器 会 自行 选择 一 个 颜色 





(可 选 ) 将 外 部 阴影 设置 为 内 部 阴 
inset 影 


div { width: 200px; height: 200px; border: 10px solid silver; box-shadow: 5px 4px 10px 2p 


图 


解释 : 给 元 素 盒子 增加 阴影 效果 。 


box-shadow: 5px 4px 10px 2px gray inset 


解释 : 实现 内 部 阴影 。 


2.outline 





CSS3 还 提供 了 轮 廊 样式 ， 它 和 边框 一 样 ， 只 不 过 它 可 以 在 边框 的 外 围 再 加 一 层 。 样 式 表 如 


下 二 
属性 值 
outline-color 颜色 
outline-offset 长 度 
outline-style 样式 
ontline-witdh 长 度 
outline 简写 
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说 明 
外 围 轮廓 的 颜色 
轮 慷 距离 元 素 边 框 边缘 的 偏 移 量 
轮廓 样式 ， 和 border-style 一 臻 
轮廓 宽度 


< 颜色 > < 样式 > < 宽度 > 
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div { width: 200px; height: 200px; border: 10px solid silver; outline: 10px double red ; 
} 


| 
解释 : 在 边框 的 外 围 再 增加 一 图 轮廓 。 

三 .光标 样式 

我 们 不 但 可 以 指定 页 面 上 的 元 素 样式 ， 就 连 光标 的 样式 也 可 以 指定 。 样 式 表 如 下 : 


属性 什 说 明 Cu 


auto,default,none,context- 
光 menu,help,pointer,progress,wait,cell,crosshair,text,vertical- 
标 text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne- 1 
样 resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew- 
式 resize,ns-resize,nesw-resize,nwse-resize,col-resize,row- 
resize,all-scroll 


CUTSOT 


div { cursor: move; 


} 


解释 : 设置 当前 元 素 的 光标 为 移动 光标 。 


第 20 章 CSS3 六 级 和 rem 


学 习 要 点 : 
1.CSS3 前 组 
2. 长 度 单位 rem 
主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 CSS 在 发 展 中 实行 标准 化 的 一 些 问 题 ， 重 点 探讨 CSS3 中 新 属性 前 
级 问题 和 新 的 单位 rem。 


一 . CSS3** 前 级 


在 CSS3 的 很 多 新 属性 推出 时 ， 这 些 属 性 还 处 在 不 太 稳 定 的 阶段 ， 随 时 可 能 被 别 除 。 而 此 时 
的 浏览 器 厂商 为 了 实现 这 些 属性 ， 采 用 前 缀 方法。 各 大 厂商 前 级 列表 如 下 : 


浏览 器 厂商 前 级 
Chrome 、Sarfari -Webkit- 
Opera -O- 
Firefox -moOz- 
Internet Explorer -ms- 


我 们 之 前 学 习 过 几 个 CSS3 的 新 属性 ， 比 如 : box-shadow、border-radius、opacity 等 。 这 几 
个 属性 我 们 在 前 面 的 使 用 中 ， 并 没有 ee 的 浏览 器 厂商 前 级 。 那 是 因为 ， 这 些 属性 已 经 
在 主流 浏览 器 或 版 本 成 为 了 标准 。 具 体 进 化 步骤 如 下 : 


1. 属 性 尚未 提出 ， 这 个 属性 所 有 浏览 器 不 可 用 ; 


2. 属 性 被 提出 ， 但 未 列 入 标准 ， 浏 览 器 厂商 通过 私有 前 级 来 支持 该 属性 
3. 属 性 被 列 入 标准 ， 可 以 使 用 前 组 或 不 使 用 前 级 来 实现 属性 特性 
4. 属 性 不 需要 再 使 用 前 级 ， 所 有 浏览 器 都 稳定 支持 。 


我 们 就 拿 border-radius 举例 ， 它 是 CSS3 的 标准 属性 。 旱 期 的 时 候 处 于 实验 阶段 ， 尚 未 列 入 
标准 时 ， 需 要 使 用 厂商 前 级 。 具 体 浏览 器 支持 度 如 下 : 


属性 浏览 器 带 前 级 版 本 不 带 前 组 版 本 标准 /实验 


border-radius IE 不 支持 9.0+ 标准 
Firefox 3.0 需 带 -moz- 4.0+ 

Safari 3.1 需 带 -webkit- 5.1+ 

Chrome 4.0 SO 

Opera 不 支持 10.5+ 


如 果 是 手机 等 移动 端 一 般 采 用 的 是 |OS 或 安 卓 系统 ， 那 么 基本 上 它 的 引擎 是 webkit， 直 接 参 
考 -webkit- 即 可 。 


在 CSS3 手册 上 ，Chrome 支持 border-radius 的 版 本 为 13.0， 而 部 分 教材 和 文章 上 写 到 只 要 
5.0。 当 然 ， 这 里 可 能 表达 的 含义 可 能 不 同 。 而 截至 到 2015 年 4 月 份 最 新 的 Chrome 版 本 已 
经 到 41.0 了 ， 所 以 ， 不 管 是 5.0 还 是 13.0 都 是 老 古 董 了 ， 没 必要 深究 。Opera 支持 border- 
radius 版 本 为 11.5， 而 目前 的 版 本 是 28.0， 也 无 伤 大 雅 了 。 


而 被 列 入 标准 的 box-shadow 和 opacity 基本 与 border-radius 前 缓 版 本 一 致 。 


// 因 为 目前 处 在 标准 阶段 ， 没 必要 写 前 级 了 


div { border-radius: 50px; 


} 


// 实 验 阶段 的 写法 


div { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: S50px; 


} 


实验 阶段 的 写法 有 三 句 ， 分 别 解释 一 下 : -webkit- 表 示 Chrome 浏览 器 的 私有 属性 前 级、- 
moz- 表 示 Firefox 私有 属性 前 级 ， 如 果 是 处 于 实验 阶段 的 旧版 本 浏览 器 ， 那 么 不 支持 border- 
radius， 从 而 通过 厂商 前 缓 的 方式 来 支持 。 如 果 是 新 版 浏览 器 ， 已 经 是 处 于 标准 阶段 ， 那 么 又 
有 两 种 说 法 : 1. 如 果 新 版 浏览 器 废 齐 了 前 组， 那么 前 组 写法 就 不 支持 了 ， 仅 支持 标准 写法 ; 2. 
如 果 新 版 浏览 器 没有 废弃 前 级 ， 那 么 两 种 写法 都 可 以 ， 但 要 注意 顺序 ， 且 属性 值 要 保持 一 

致 。 


如 果 同 时 出 现 四 个 前 级 + 一 个 标准 写法 ， 四 个 前 级 是 当 实 验 阶 段 时 让 四 种 引擎 的 浏览 器 厂商 支 
持 自己 的 私有 属性 ， 一 个 标准 写法 表示 当 这 个 属性 列 入 标准 后 ， 使 用 新 版 浏览 器 运行 时 直接 
执行 这 个 标准 属性 。 

// 前 组 写法 写 在 标准 后 面 ， 且 值 不 一 样 ， 就 会 出 现 问题 


div { border-radius: 50px; -webkit-border-radius: 100px; 


} 


特别 注意 : 1.IE 的 前 组 -ms-， 和 Opera 的 前 级 -0-， 在 border-radius 中 不 存在 ; 2. 现 在 的 
Opera 浏览 器 也 支持 -webkit- 前 级 ，-webkit-border-radius 就 能 支持 ; 3.Safari for Windows 已 
被 羊 果 公司 在 2012 年 放弃 ， 遗 留 版 本 为 5.1.7。 


最 后 说 明 : W3C 官方 的 立场 表示 实验 阶段 的 属性 仅 为 了 测试 ， 未 来 有 可 能 修改 或 删除 。 而 大 
量 的 开发 者 也 认为 在 实际 项 目 中 不 应 该 使 用 前 级 ， 而 使 用 一 种 优雅 降级 保证 一 定 的 用 户 体 
验 ， 而 通过 渐进 增 减 的 方式 让 新 版 高 级 浏览 器 保证 最 高 的 效果 。 

度 


二 长 度 单 位 rem 


CSS3 引入 了 一 些 新 的 尺寸 单位 ， 这 里 重点 推荐 一 个 : rem 或 者 成 为 ( 根 em)。 目 前 主流 的 现 
代 浏 览 器 都 很 稳定 的 支持 。 它 和 em、 百 分 比 不 同 的 是 ， 它 不 是 与 父 元 素 挂钩 ， 而 是 相对 于 根 
元 素 <html> 的 文本 大 小 来 计算 的 ， 这 样 能 更 好 的 统一 整体 页 面 的 风格 。 


// 首 先 ， 来 一 段 HTML 


<h1> 标 题 <em> 小 标题 </em></h1> 
<p> 我 是 一 个 段落 ， 我 是 一 段 <code> 代 码 </code> 
</p> 


// 其 次 来 一 段 CSS 


html { font-size: 62.5%; 
} hi { font-size: 3em; 
} p { font-size: 1.4em; 


这 里 做 几 个 解释 ， 我 们 在 之 前 的 Web 设计 中 大 量 使 用 了 px 单位 进行 布局 。 因 为 ， 早 期 的 固 
定 布局 使 用 px 较为 方便 ， 逐 渐 养 成 了 这 种 习惯 。 而 使 用 em 单位 其 实 更 加 灵活 ， 尤 其 是 在 修 
改 样式 时 ， 只 需要 修改 一 下 挂钩 元 素 的 那个 大 小 即 可 ， 无 须 每 个 元 素 一 个 个 修改 。 


但 就 算是 em， 还 是 有 一 定 问 题 。 网 页 默认 的 字号 大 小 为 16px， 然 后 通过 <html> 设 置 
62.5%， 将 网 页 基准 设置 为 10px。 而 <h1> 设 置 为 3em， 就 是 自身 大 小 的 3 倍 ; <p> 设 置 为 
1.4em， 就 是 10px 的 1.4 倍 ， 即 14px。 


现在 问题 来 了 ，<code> 里 面 的 文本 想 设置 11px， 怎 么 办 呢 ? 了 设置 1.1em 吗 ? 了 不 对 ， 因 为 它 
挂钩 的 父 元 素 不 是 <html> 而 是 <p> 变 成 了 14px 的 1.1 倍 了 ， 而 想 设置 11px， 则 需要 设置 
0.786 倍 才 行 。 但 是 ， 这 样 的 计算 量 太 大 了 。 所 以 ，W3C 推出 了 直接 基于 根 元 素 单位 : 
rem 。 


// 直 接 基 于 <html> 的 单位 


code { font-size: 1.1 rem; 


} 
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第 21 章 CSS3 文本 效果 


学 习 要 点 : 
1. 文 本 阴影 
2. 文 本 裁剪 
3. 文 本 描 边 
4. 文 本 填充 
主讲 教师 : 李 炎 恢 
本 章 主要 探讨 HTML5 中 CSS3 中 文本 效果 ， 其 中 也 包含 一 些 之 前 讲 过 的 CSS3 文本 属性 。 
一 .文本 阴影 
CSS3 提供 了 text-shadow 文本 阴影 效果 ， 这 个 属性 在 之 前 讲 过 ， 只 是 没有 涉及 浏览 器 支持 情 
况 。 
text-shadow Opera Firefox Chrome IE Safari 


9.5+ 3.5+ 4+ 10+ 3.1+ 


这 里 有 几 个 注意 点 : 1.text-shadow 在 CSS2 的 时 候 出 现 过 ， 但 各 大 浏览 器 碍 于 消耗 大 量 的 资 
源 ， 述 迟 未 支持 ， 然 后 在 CSS2.1 中 剔除 了 。 现 在 ，CSS3 已 经 全 面 支持 了 ; 2. 最 低 支持 版 本 
上 ， 不 同 手册 和 教材 上 都 不 太 同 ， 但 版 本 年 代 久 远 ， 无 伤 大 雅 。 最 准确 的 可 以 查询 这 个 网 

站 : http://caniuse.com。 最 需要 注意 的 只 有 IE10 才 支 持 ，IE9 不 支持 的 ; 3. 目 前 的 浏览 器 不 
需要 给 这 个 属性 加 上 任何 前 级， 具体 查询 前 组 版 本 可 以 访问 刚才 提供 的 地 址 。 


// 正 值 阴 影 


text-shadow: 1px 1px 1px red; 


// 负 值 阴 影 


text-shadow: -1px -1px 1px red 


// 多 重 阴 影 登 加 


text-shadow:Opx Opx © rgb(188,178,188), 
1px Opx 0 rgb(173,163,173), 
2px 0px 0 rgb(157,147,157), 
3px 0px 0 rgb(142,132,142), 
4px Opx © rgb(126,116,126), 
5px QOpx 0 rgb(111,101,111), 
6px QOpx © rgb(95,85,95), 


7px Opx © rgb(79,69,79), 

8px 0px 7px rgba(0,0,0,0.35)， 
8px QOpx 1px rgba(0,0,0,0.5)， 

Opx Qpx 7px rgba(0,0,0,0.2); 


二 .文本 裁剪 
CSS3 提供 了 text-overflow 属性 来 控制 文本 的 溢出 部 分 ， 它 的 作用 是 对 溢出 的 部 分 裁剪 掉 ， 
然后 判定 是 否 添加 省 略 号 。 首 先 我 们 先 看 下 样式 表 的 属性 ， 如 下 : 
属性 值 说 明 
clip 默认 值 ， 裁 前 文本 时 不 添加 “..." 省 略 号 
ellipsis 裁剪 文本 时 添加 ”省略 号 


/必须 不 换 号 和 使 用 overflow 控制 溢出 


p { width: 160px; white-space: nowrap; background: silver; /*text-overflow: clip;*/ text- 


} 
里 潮 


对 于 text-overflow 的 支持 度 ， 是 根据 它 的 属性 值 来 判定 的 ， 不 同 的 属性 值 浏览 器 支持 度 不 
同 oo 





属性 值 Opera Firefox Chrome IE Safari 
clip 9.63+ 2:0+ 1.0+ 6.0+ 3.1+ 
ellipsis HOS 6.0+ 0+ 6.0+ 四 下 二 


// 在 Opera 早期 版 本 10.0 ~ 10.1 中 ， 需 要 使 用 带 前 缓 的 -0-。 


p { -o-text-overf]low: ellipsis; text-overflow: ellipsis,; 


} 
而 在 Opera 主流 版 本 中 ， 引 擎 已 经 靠 扰 Webkit， 则 不 需要 -0- 了 。 目 前 来 说 ， 也 不 需要 兼容 -0- 
于 
三 :文本 描 边 


CSS3 提供 了 描 边 属性 ， 即 text-stroke、text-stroke-width、text-stroke-color。 目 前 只 有 
webkit 引擎 的 浏览 器 支持 ， 并 且 必 须 加 上 -webkit- 前 级 才能 有 效 。 


属性 Opera Firefox Chrome IE Safari 
text-stroke 系列 15.0+ 不 支持 4.0+ 不 支持 3.1+ 


/实验 阶段 的 产物 ， 了 解 即 可 


p { font-size: 50px; -webkit-text-stroke: 1px red; 
} 


// 修 改 描 边 的 颜色 和 厚度 
p { font-size: 50px; -webkit-text-stroke: 1px red; -webkit-text-stroke-color: orange; -we 


加 | 本 : 


四 .文本 填充 





CSS3 提供 了 一 个 文本 颜色 填充 功能 : text-fill-color， 感 觉 和 color 属性 很 像 。 其 实在 配合 其 
他 属性 才能 达到 不 一 样 的 效果 。 


属性 Opera Firefox Chrome IE Safari 
text-fill-color 15.0+ 不 支持 4.0+ 不 支持 3.1+ 


// 不 配合 背景 样式 时 ， 和 color 属性 没 区 别 


p { font-size: 150px; -webkit-text-fill-color: red; 
} 


/和 CSS3 背景 的 新 特性 搭配 产生 渐变 文字 
p { font-size: 150px; font-family: 黑体 ; background: -webkit-linear-gradient(top,#eee,#aae 


Ne 





第 21 章 CSS3 文本 效果 


学 习 要 点 : 
1. 文 本 阴影 
2. 文 本 裁剪 
3. 文 本 描 边 
4. 文 本 填充 
主讲 教师 : 李 炎 恢 
本 章 主要 探讨 HTML5 中 CSS3 中 文本 效果 ， 其 中 也 包含 一 些 之 前 讲 过 的 CSS3 文本 属性 。 
一 .文本 阴影 
CSS3 提供 了 text-shadow 文本 阴影 效果 ， 这 个 属性 在 之 前 讲 过 ， 只 是 没有 涉及 浏览 器 支持 情 
况 。 
text-shadow Opera Firefox Chrome IE Safari 


9.5+ 3.5+ 4+ 10+ 3.1+ 


这 里 有 几 个 注意 点 : 1.text-shadow 在 CSS2 的 时 候 出 现 过 ， 但 各 大 浏览 器 碍 于 消耗 大 量 的 资 
源 ， 述 迟 未 支持 ， 然 后 在 CSS2.1 中 剔除 了 。 现 在 ，CSS3 已 经 全 面 支持 了 ; 2. 最 低 支持 版 本 
上 ， 不 同 手册 和 教材 上 都 不 太 同 ， 但 版 本 年 代 久 远 ， 无 伤 大 雅 。 最 准确 的 可 以 查询 这 个 网 

站 : http://caniuse.com。 最 需要 注意 的 只 有 IE10 才 支 持 ，IE9 不 支持 的 ; 3. 目 前 的 浏览 器 不 
需要 给 这 个 属性 加 上 任何 前 级， 具体 查询 前 组 版 本 可 以 访问 刚才 提供 的 地 址 。 


// 正 值 阴 影 


text-shadow: 1px 1px 1px red; 


// 负 值 阴 影 


text-shadow: -1px -1px 1px red 


// 多 重 阴 影 登 加 


text-shadow:Opx Opx © rgb(188,178,188), 
1px Opx 0 rgb(173,163,173), 
2px 0px 0 rgb(157,147,157), 
3px 0px 0 rgb(142,132,142), 
4px Opx © rgb(126,116,126), 
5px QOpx 0 rgb(111,101,111), 
6px QOpx © rgb(95,85,95), 


7px Opx © rgb(79,69,79), 

8px 0px 7px rgba(0,0,0,0.35)， 
8px QOpx 1px rgba(0,0,0,0.5)， 

Opx Qpx 7px rgba(0,0,0,0.2); 


二 .文本 裁剪 
CSS3 提供 了 text-overflow 属性 来 控制 文本 的 溢出 部 分 ， 它 的 作用 是 对 溢出 的 部 分 裁剪 掉 ， 
然后 判定 是 否 添加 省 略 号 。 首 先 我 们 先 看 下 样式 表 的 属性 ， 如 下 : 
属性 值 说 明 
clip 默认 值 ， 裁 前 文本 时 不 添加 “..." 省 略 号 
ellipsis 裁剪 文本 时 添加 ”省略 号 


/必须 不 换 号 和 使 用 overflow 控制 溢出 


p { width: 160px; white-space: nowrap; background: silver; /*text-overflow: clip;*/ text- 


} 
里 潮 


对 于 text-overflow 的 支持 度 ， 是 根据 它 的 属性 值 来 判定 的 ， 不 同 的 属性 值 浏览 器 支持 度 不 
同 oo 





属性 值 Opera Firefox Chrome IE Safari 
clip 9.63+ 2:0+ 1.0+ 6.0+ 3.1+ 
ellipsis HOS 6.0+ 0+ 6.0+ 四 下 二 


// 在 Opera 早期 版 本 10.0 ~ 10.1 中 ， 需 要 使 用 带 前 缓 的 -0-。 


p { -o-text-overf]low: ellipsis; text-overflow: ellipsis,; 


} 
而 在 Opera 主流 版 本 中 ， 引 擎 已 经 靠 扰 Webkit， 则 不 需要 -0- 了 。 目 前 来 说 ， 也 不 需要 兼容 -0- 
于 
三 :文本 描 边 


CSS3 提供 了 描 边 属性 ， 即 text-stroke、text-stroke-width、text-stroke-color。 目 前 只 有 
webkit 引擎 的 浏览 器 支持 ， 并 且 必 须 加 上 -webkit- 前 级 才能 有 效 。 


属性 Opera Firefox Chrome IE Safari 
text-stroke 系列 15.0+ 不 支持 4.0+ 不 支持 3.1+ 


/实验 阶段 的 产物 ， 了 解 即 可 


p { font-size: 50px; -webkit-text-stroke: 1px red; 
} 


// 修 改 描 边 的 颜色 和 厚度 
p { font-size: 50px; -webkit-text-stroke: 1px red; -webkit-text-stroke-color: orange; -we 


加 | 本 : 


四 .文本 填充 





CSS3 提供 了 一 个 文本 颜色 填充 功能 : text-fill-color， 感 觉 和 color 属性 很 像 。 其 实在 配合 其 
他 属性 才能 达到 不 一 样 的 效果 。 


属性 Opera Firefox Chrome IE Safari 
text-fill-color 15.0+ 不 支持 4.0+ 不 支持 3.1+ 


// 不 配合 背景 样式 时 ， 和 color 属性 没 区 别 


p { font-size: 150px; -webkit-text-fill-color: red; 
} 


/和 CSS3 背景 的 新 特性 搭配 产生 渐变 文字 
p { font-size: 150px; font-family: 黑体 ; background: -webkit-linear-gradient(top,#eee,#aae 


Ne 





第 23 章 CSS3 边框 图 片 效果 


学 习 要 点 : 

1. 属 性 初探 

2. 属 性 解释 

3. 简 写 和 版 本 
主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 CSS3 中 边框 图 片 瑚 景 的 效果 ， 这 个 新 属性 让 边框 更 加 的 丰富 


多 彩 。 


CSS3 提供 了 一 个 新 的 属性 集合 ， 用 这 几 个 属性 可 以 网 入 图 片 形式 的 边框 。 这 样 ， 边 框 就 可 以 
自 定 义 了 。 


1.border-image-source // 引 入 背景 图 片 地 址 
2.border-image-slice // 切 割 引 入 背景 图 片 
3.border-image-width // 边 框图 片 的 宽度 
4.border-image-repeat // 边 框 背 景 图 片 的 排列 方式 
5.border-image-outset // 边 框 背景 向 外 扩张 


6.border-image /上 面 五 个 属性 的 简写 方式 


要 实现 边框 背景 ， 我 们 对 图 片 也 有 一 定 的 要 求 ， 否 则 效果 不 能 完全 体现 出 来 。 图 片 可 以 通 
九宫 格 的 切 分 来 了 解 它 。 我 们 使 用 W3C 官网 上 教学 的 图 片 来 讲解 一 下 。 


border-tmage -slice: 124; 








如 上 图 所 示 ， 九 宫 格 并 不 一 定 要 求 每 一 个 格子 大 小 都 相同 。 当 然 ， 如 果 相同 的 话 ， 制 作 边框 
背景 就 相对 容易 一 点 。 比 如 如 下 这 张 图 片 : 





S 


首先 ， 用 Photoshop 软件 分 析 一 下 这 个 标准 九宫 格 的 总 体 大 小 和 每 个 格子 的 大 小 。 最 终 得 出 
图 片 总 大 小 为 81px 正方 形 ， 四 个 角 的 大 小 为 27px 的 正方 形 ， 其 余 五 个 角 也 是 27px。 


那么 ， 第 一 步 : 先 创建 一 个 金子 区 域 ， 大 小 为 400x400 的 矩形 。 然 后 设置 引入 边框 图 像 。 


/引入 边框 图 像 


border-image-source: Url(border .png ) ; 


单单 只 有 这 和 句 话 ，webkit he 览 器 会 在 金子 区 块 的 四 个 角 看 到 一 丁点 图 像 的 影 
其 他 浏览 器 什么 都 看 不 到 。 这 是 由 于 没有 设置 边框 背景 图 像 的 宽度 导致 的 。 


// 设 置 边框 图 像 宽度 ， 上 右 下 左 ， 可 以 设置 四 个 值 


border-image-width: 81px; 


Pi ， 而 不 是 边框 宽度 。 当 你 设置 边框 宽度 ， 你 会 发 现 ， 文 本 会 偏 
边框 图 像 的 宽度 不 会 挤 压 文本 。 


/设置 边框 的 宽度 


border-width: 20px; 


以 上 设置 完毕 后 ， 支 持 边框 背景 图 片 的 浏览 器 会 在 四 个 角落 销 上 这 张 图 片 的 完整 形式 。 这 个 
时 候 需要 通过 引入 切割 属性 来 配置 背景 图 片 的 显示 方式 。 


// 首 先 ， 边 框图 像 宽 度 设置 为 27px 和 一 个 单 格 宽 高 一 致 


| 


border-image-width: 27px; 


// 设 置 切割 属性 的 大 小 


border-image-slice: 27; 


这 里 的 27 不 需要 设置 px 像素 ， 因 为 它 默 认 就 是 像素 。 设 置 27 之 后 ， 我 们 会 发 现 边框 的 四 
个 角 正 好 是 桶 红色 的 四 个 角 。 那 么 你 可 以 逐步 放大 或 逐步 放下 这 个 值 ， 来 体验 一 下 它 的 变 
化 。 


/从 27 逐步 放大 到 81， 四 个 角 都 慢 慢 缩小 ， 各 自 显 示 一 个 完整 的 图 像 


border-image-slice: 81; 


// 从 27 逐步 缩小 到 0， 发 现 四 个 角 都 慢 慢 变 大 ， 配 合 便 整体 显示 一 个 完整 图 像 


border-image-slice: © fill; 


上 面 只 是 单独 设置 了 一 个 像素 表示 四 个 边 切割 的 大 小 ， 你 也 可 以 设置 百分比 、 浮 点 值 或 者 分 
别 设 置 四 个 变 的 大 小 。 


//33.5% 差 不 多 27 


border-image-slice: 33.5%; 


// 上 下 设置 27， 左 右 设置 0 


border-image-slice: 27 09; 


如 果 想 让 边框 背景 向 外 扩张 ， 那 么 可 以 进行 扩张 设置 。 


// 向 外 扩张 20pX， 也 可 以 是 浮 点 值 ， 比 如 2.2 


border-image-outset: 20px; 


四 个 角 设 定好 之 后 ， 我 们 要 设 定 四 个 变 的 显示 排列 方式 。 使 用 border-image-repeat 属性 ， 有 
四 个 值 提供 使 用 ， 分 别 如 下 表 : 
属性 说 明 
stretch ”指定 用 拉 伸 方式 填充 边框 背景 图 。 默 认 值 。 


用 
repeat 指定 用 平 铺 方式 来 填充 边框 背景 图 。 当 图 片 碰 到 边界 时 ， 如 果 超 过 则 被 截断 。 
用 


oud 指定 用 平 铺 方式 来 填充 边框 背景 图 。 图 片 会 根据 边框 的 尺寸 动态 调整 图 片 的 大 
小 ， 直 至 正好 可 以 铺 满 整个 边框 。 
指定 用 平 铺 方式 来 填充 边框 背景 图 。 图 片 会 根据 边框 的 尺寸 动态 调整 图 片 的 之 


间 的 间距 ， 直 至 正好 可 以 铺 满 整个 边框 。 


// 拉 伸 方 式 填充 ， 当 然 ， 通 过 上 右 下 左 设置 四 个 边 均 可 


border-image-repeat: stretch; 


// 平 铺 填 充 ， 超 过 则 被 截断 


border-image-repeat: repeat; 


// 平 铺 填充 ， 动 态 调整 图 片 大 小 直至 铺 满 


border-image-repeat: round; 


// 平 铺 填充 ， 动 态 调整 图 片 的 间距 直至 铺 满 


border-image-repeat: space; 


// 另 一 个 按钮 的 小 例子 


div { width: 400px; height: 40px; border-image-source: url(button.png); border-image-widt 
} 


回 人 





三 . 简写 和 版 本 


//border-image 简写 格式 很 简单 ， 具 体 如 下 : 


border-image :<' border-image-source '> || <' border-image-Slice '> [ /<' border-image-wi 


加 | 





// 以 上 是 手册 上 摘录 的 ， 转 换 成 实际 格式 如 下 : 


border-image: url(border.png) 27/27px round ; 


对 于 支持 的 浏览 器 及 版 本 如 下 表 : 


Opera Firefox Chrome Safari 
部 分 支持 需 带 前 级 :5~12:1 3.5 ~ 14 4~14 321=5:1 
支持 需 带 前 级 无 天 无 
支持 不 带 前 级 15+ 15+ 15+ 6+ 


// 兼 容 加 上 前 组 


-webkit-border-image: url(border.png) 27/27px round; 
-moz-border-image: url(border.png) 27/27px round ; 
-0-border-image: url(border.png) 27/27px round ; 
border-image: url(border.png) 27/27px round ; 


IE 
无 
无 
11.0+ 


第 24 章 CSS3 变形 效果 [下 ] 


学 习 要 点 : 

1.3D 变形 简介 
2.transform-style 
3.perspective 
4.3D 变形 属性 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS3 的 变形 效果 ， 主 要 接着 上 节 课 的 2D 平面 变形 转换 到 3D 立体 
变形 。 

一 . **3D** 变形 简介 

之 前 我 们 学 习 了 元 素 的 平移 、 旋 转 、 缩 放 和 倾斜 等 功能 。 这 些 效果 只 是 单纯 在 二 维 平面 图 上 
的 ， 我 们 称 之 为 2D。 那 么 其 实 CSS3 也 提供 了 三 维 立 体 的 一 些 功能 效果 ， 并 且 目 前 较 新 的 主 
流 浏览 器 都 比较 支持 ， 只 不 过 比 2D 晚 一 些 ， 对 浏览 器 的 版 本 要 求 也 要 高 一 些 。 


由 于 3D 是 立体 三 维 ， 在 x、y 轴 的 基础 上 一 般 会 多 出 一 个 zZ 轴 ， 深 入 跃 出 轴 。 以 下 是 3D 变 
形 的 属性 值 表 ， 如 下 : 


属性 值 说 明 
translate3d(x,y,z) 3D 方式 平移 元 素 ， 设 置 x、y 和 ZzZ 轴 
translateZ(z) 设置 3D 方式 平移 元 素 的 Z 轴 
scale3d(x,y,z) 3D 方式 缩放 一 个 元 素 
scaleZ(z) 设置 3D 方式 缩放 元 素 的 Z 轴 
rotate3d(x,y,z,a) 3d 方式 旋转 元 素 
rotateX(a) 分 别 设置 3D 方式 的 旋转 元 素 的 x、y 和 ZzZ 轴 
rotateY(a) 
rotateZ(a) 
perspective( 长 度 值 ) 设置 一 个 透视 投影 矩阵 
matrix3d( 多 个 值 ) 定义 一 个 矩阵 


3D 变形 比 2D 变形 出 来 的 要 晚 一 些 ， 所 以 如 果 需 要 兼容 旧版 本 浏览 器 ， 可 以 对 照 这 个 表 。 具 
体 如 下 : 


Opera Firefox Chrome Safari IE 


支持 需 带 前 级 15~ 22 10~15 12~35 4~8 无 
支持 不 带 前 级 23+ 16+ 26+ 无 10.0+ 


// 兼 容 版 本 完整 形式 


-webkit-transform: translatez(200px); 
-moz-transform: translateZz(200px); 
-0-transform: translatez(200px); 
-ms-transform: translateZz(200px); 
transform: translateZz(200px); 


二 **transform-style** 


transform-style 属性 是 指定 敬 套 元 素 如 何在 3D 空间 中 呈现 。 


属性 值 说 明 
flat 默认 值 ， 表示 所 有 子 元 素 在 2D 平面 呈现 。 
preserve-3d 表示 子 元 素 在 3D 空间 中 呈现 。 


// 一 般 设 置 到 当前 元 素 的 父 元 素 


transform-style: preserve-3d; 


需要 再 配合 后 面 的 功能 属性 和 变形 配置 ， 才 能 看 到 效果 。 同 样 ， 这 个 属性 也 需要 加 上 各 种 厂 
商 前 级 。 

三 .+ **perspective** 

perspective 是 3D 变形 的 重要 属性 ， 该 属性 会 设置 查看 者 的 位 置 ， 并 将 可 视 内 容 映射 到 一 个 
视 锥 上 ， 继 而 投放 到 一 个 2D 平面 上 。 


2 说 明 
none ”默认 值 ， 表 示 无 限 的 角度 来 看 3D 物体 ， 但 看 上 去 是 平 的 。 
长 度 接受 一 个 长 度 单位 大 于 0 的 值 ， 其 单位 不 能 为 百分比 。 值 越 大 ， 和 角度 出 现 的 越 
值 远 ， 就 好 比 你 人 和 离 远 一 点 看 物体 。 值 越 小 ， 正 相反 。 
// 设 置 查看 者 的 距离 位 置 ， 一 般 设 置 在 元 素 的 父 元 素 上 


perspective: 1000px; 


需要 再 配合 后 面 的 功能 属性 和 变形 配置 ， 才 能 看 到 效果 。 同 样 ， 这 个 属性 也 需要 加 上 各 种 厂 


商 前 级 。 


四 . **3D** 变形 属性 
我 们 运用 前 面 3D 功能 属性 transform-style 和 perspective 来 构建 3D 变形 效果 。 
1.translate3d(x,y,z) 


// 需 要 3D 位 移 的 HTML 结构 ， 必 须 有 父 元 素 包 含 


<div id="a"> 
<img src="img.png" alt="" /> 
</div> 


/1/ICSS 部 分 ， 父 元 素 设 置 3D 呈现 且 设置 透视 距离 


#a { perspective: 1000px; transform-style: preserve-3d; 
} img { 

/*Z 轴 可 以 是 负 值 */ transform: translate3d(300px,100px,240px); 
} 


2.translateZ(z) 


// 可 以 单独 设置 zZ 轴 ，Z 轴 可 以 是 负 值 


img { transform: translateZz(240px); 


3.scale3d(x,y,z) 


//3D 缩放 ， 单 独 设置 无 效 ， 需 要 配合 角度 


img { transform: scale3d(1,1,1.5) rotateXx(45deg); 


4.scaleZ(z) 


// 单 独 设置 Z 轴 ，X 和 Yy 轴 上 默认 为 1 


img { transform: ScaleZz(1.5) rotateXx(45deg); 


5.rotate3d(x,y,z,a) 


// 设 置 3D 旋转 ，a 表示 角度 ，XyZ 是 0 或 1 之 间 的 数值 


transform: rotate3d(1,0,0,45deg); 


6.rotateX(a)’** 、 rotateY(a) ~、 **rotateZ(a) 


// 单 独 设置 3D 旋转 


transform: rotateXx(45deg); 
transform: rotateY(45deg); 
transform: rotateZ(45deg ) ; 
transform: rotateX(45deg) rotateY(45deg) rotatez(45deg); 


最 后 一 个 matrix3d 就 不 多 说 了 ， 和 忽略 。 


CSS3 还 提供 了 perspective-origin 属性 来 设置 3D 变形 中 的 源 点 角度 。 该 属性 默认 值 为 50% 
50% 也 就 是 center center 。 


属性 值 说 明 
百分数 值 指定 元 素 X 轴 或 y 轴 的 起 点 
长 度 值 指定 距离 
left 指定 xX 轴 的 位 置 
center 
right 
top 指定 y 轴 的 位 置 
center 
bottom 


// 源 点 设置 为 右上 方 变形 


perspective-origin: top right; 


CSS3 还 提供 了 一 个 在 元 素 中 设置 透视 的 值 perspective( 长 度 值 )， 但 它 还 是 和 在 父 元 素 设置 
有 一 定 不 同 。 因 为 父 元 素 整个 作为 透视 ， 而 元 素 自己 作为 透视 ， 导 致 不 同 。 


/具体 测试 看 透视 的 距离 


img { transform: perspective(1000px) rotateY(45deg); 


第 25 章 CSS3 过 渡 效 果 


学 习 要 点 : 

1. 过 渡 简 介 
2.transition-property 
3.transition-duration 
4.transition-timing-function 
5.transition-delay 

6. 简 写 和 版 本 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS3 的 过 渡 效 果 ， 通 过 这 个 功能 可 以 不 借助 JavaScript 来 实现 简 
单 的 用 户 交互 功能 。 

过 渡 简 介 
过 渡 效 果 一 般 是 通过 一 些 简单 的 CSS ER 渡 功 能 ， 比 


如 : :hover、:focus、:active、:checked 等 。CSS3 提供 了 transition 属性 来 实现 这 个 过 渡 功 
EE ， 主 要 属性 如 下 表 : 


属性 说 明 
transition-property 指定 过 渡 或 动态 模拟 的 CSS 属性 
transition-duration 指定 完成 过 渡 所 需 的 时 间 
transition-timing-function 指定 过 渡 的 函数 
transition-delay 指定 过 渡 开 始 出 现 的 延迟 时 间 
transition 简写 形式 ， 按 照 上 门 四 个 属性 值 连 写 


我 们 先 创建 一 个 没有 过 渡 效 果 的 元 素 ， 然 后 通过 :hover 来 触发 它 。 在 没有 任何 过 渡 效 果 的 触 
发 ， 会 立即 生硬 的 执行 触发 。 


// 设 置 元 素 样式 


div { width: 200px; height: 200px; border: 1px solid green; 


div:hover { background-color: black; color: white; margin-left: 5Qpx; 


} 


二 **transition-property** 


首先 ， 设 置 过 渡 的 第 一 个 属性 就 是 指定 过 渡 的 属性 。 同 样 ， 你 需要 指定 你 要 过 渡 某 个 元 素 的 
两 套 样式 用 于 用 户 和 页 面 的 交互 。 那 么 就 使 用 transition-property 属性 ， 详 细 属 性 值 如 下 表 : 


属性 值 说 明 
none 没有 指定 任何 样式 
all 默认 值 ， 指 定 元 素 所 支持 transition-property 属性 的 样式 
指定 样式 指定 支持 transition-property 的 样式 


从 上 门 的 列表 中 来 看 ， 一 般 来 说 ，none 用 于 本 身 有 过 渡 样 式 从 而 取消 。 而 all， 则 是 支持 所 有 
transition-property 样式 ， 还 有 一 种 是 指定 transition-property 中 的 茶 些 样式 。 那 么 transition- 
proerty 支持 的 样式 有 哪些 ? 如 下 表 所 示 : 


样式 名 称 样式 类 型 
background-color color( 闫 色 ) 
background-image only gradients( 渐 变 ) 
background-position percentage, length( 百 分 比 ， 长 度 值 ) 
border-bottom-color color 
border-bottom-width length 
border-color color 
border-left-color color 
border-left-width length 
border-right-color color 
border-right-width length 
border-spacing length 
border-top-color color 
border-top-width length 
border-width length 
bottom length, percentage 
color color 
crop rectangle 


font-size length, percentage 


font-weight 
grid-* 

height 

left 
letter-spacing 
line-height 
margin-bottom 
margin-left 
margin-right 
margin-top 
max-height 
max-width 
min-height 
min-width 
opacity 
outline-color 
outline-offset 
outline-width 
padding-bottom 
padding-left 
padding-right 
padding-top 
right 
text-indent 
text-shadow 
top 
vertical-align 
visibility 
width 
word-spacing 


z-index 


number 

various 

length, percentage 
length, percentage 
length 

number, length, percentage 
length 

length 

length 

length 

length, percentage 
length, percentage 
length, percentage 
length, percentage 
number 

color 

integer 

length 

length 

length 

length 

length 

length, percentage 
length, percentage 
shadow 

length, percentage 
keywords, length, percentage 
visibility 

length, percentage 
length, percentage 


integer 


Zoom number 
// 设 置 背 景 和 文字 颜色 采用 过 渡 效 果 


transition-property: background-color, color, margin-left; 


三 : **transition-duration** 


如 果 单 纯 设 置 过 渡 的 样式 ， 还 不 能 够 立刻 实现 效果 。 必 须 加 上 过 渡 所 需 的 时 间 ， 因 为 默认 情 
况 下 过 渡 时 间 为 0° 


// 设 置 过 渡 时 间 为 1 秒 钟 ， 如 果 是 半 秒 钟 可 以 设置 为 .5s 


transition-duration: 1s,; 


四 . **transition-timing-function** 


当 过 渡 效 果 运 行 时 ， 比 如 产生 缓 动 效果 。 默 认 情 况 下 的 缓 动 是 : 元 素 样 式 从 初始 状态 过 渡 到 
终止 状态 时 速度 由 快 到 慢 ， 和 逐渐 变 慢 ， 即 ease。 也 是 默认 值 ， 其 他 几 种 缓 动 方式 如 下 表 所 


默认 值 ， 元 素 样 式 从 初始 状态 过 渡 到 终止 状态 时 速度 由 
快 到 慢 ， 逐 渐变 慢 。 等 同 于 贝 塞 尔 曲线 (6.25，6.1， 
6.25，1.6) 


元 素 样 式 从 初始 状态 过 渡 到 终止 状态 速度 是 恒 速 。 等 同 
linear 
于 贝 塞 尔 曲线 (6.6，6.6，1.6，1.6) 


元 素 样式 从 初始 状态 过 渡 到 终止 状态 时 ， 速 度 越 来 越 
快 ， 呈 一 种 加 速 状态 。 等 同 于 贝 塞 尔 曲 线 (6.42，6， 
1.6，1.6) 
元 素 样式 从 初始 状态 过 渡 到 终止 状态 时 ， 速 度 越 来 越 
慢 ， 呈 一 种 减速 状态 。 等 同 于 贝 塞 尔 曲线 (96, 8, 8.58， 
1.6) 
人 元 素 样式 从 初始 状态 过 渡 到 终止 状态 时 ， 先 加 速 ， 再 减 
ease-1nN-Out 
速 。 等 同 于 贝 塞 尔 曲 线 (6.42，6，68.58，1.6) 


// 恒 定 速 





transition-timing-function: linear; 


以 上 五 种 都 是 设 定好 的 属性 值 ， 我 们 也 可 以 自 定义 这 个 缓 动 。 使 用 cubic-bezier() 属性 值 ， 里 
面 传递 四 个 参数 p0,p1,p2,p3， 值 在 0~1 之 间 。 


// 自 定义 缓 动 


transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55); 


至 于 具体 


这 些 数 值 干什么 的 ， 怎 么 才 可 以 精确 得 到 相关 的 信息 ， 这 个 要 了 解 计算 机 图 形 学 中 
的 三 次 贝 塞 尔 


线 的 相关 知识 ， 类 似 与 photoshop 中 的 曲线 调 色 。 这 里 我 们 忽略 。 


曲 
还 有 一 种 不 是 平滑 过 渡 ， 是 跳跃 式 过 渡 ， 属 性 值 为 : steps(n,type) 。 Us ， 表 
示 跳 跃 几 次 。 第 二 个 值 是 start 或 者 end， 可 选 值 。 表 示 开 始 时 跳跃 ， 还 是 结束 时 跳跃 。 


// 跳 跃 10 次 至 结束 


transition-timing-function: steps(10,end); 


五 * **transition-delay** 


这 个 属性 可 以 设置 一 个 过 渡 延 迟 效 果 ， 就 是 效果 在 设置 的 延迟 时 间 后 再 执行 。 使 用 transition- 
delay 属性 值 。 如 果 有 多 个 样式 效果 ， 可 以 设置 多 个 延迟 时 间 ， 以 空格 隔 开 。 


/设置 延迟 效果 
transition-delay: 0s, 1s, 0s; 


六 .简写 和 版 本 


我 可 以 直接 使 用 transition 来 简写 ， 有 两 种 形式 的 简写 。 第 一 种 是 ， 每 个 样式 单独 声明 ; 第 二 
种 是 不 去 考虑 样式 ， 即 使 用 all 全 部 声明 。 


// 单 独 声 明 
transition: background-color 1s ease Qs, color 1s ease 0s, margin-left 1s ease 0S ; 


1/ 如果 每 个 样式 都 是 统一 的 ， 直 接 使 用 al 


transition: all 1s ease 0s; 


为 了 兼容 旧版 本 ， 需 要 加 上 相应 的 浏览 器 前 级 ， 版 本 信息 如 下 表 : 


Opera Firefox Chrome Safari IE 
支持 需 带 前 级 15 ~ 22 515 4~25 3:1~6 无 
支持 不 带 前 级 23+ 16+ 26+ 6.1+ 10.0+ 


/兼容 完整 版 


-webkit-transition: all 1s ease 0S 
-moz-transition: all 1s ease Qs; 
-0O-transition: all 1s ease 0s; 
-ms-transition: all 1s ease 0s; 
transition: all 1s ease 0s; 
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2. 属 性 详解 
3. 简 写 和 版 本 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS3 的 动画 效果 ， 可 以 通过 类 似 Flash 那样 的 关键 帧 模式 控制 运 
行 。 


一 动画 简介 


CSS3 提供 了 类 似 Flash 关键 帧 控制 的 动画 效果 ， 通 过 animation 属性 实现 。 那 么 之 前 的 
transition 属性 只 能 通过 指定 属性 的 初始 状态 和 结束 状态 来 实现 动画 效果 ， 有 一 定 的 局 限 性 。 


animation 实现 动画 效果 主要 由 两 个 部 分 组 成 : 1. 通 过 类 似 Flash 动画 中 的 关键 帧 声明 一 个 动 
画 ; 2. 在 animation 属性 中 调用 关键 帧 声明 的 动画 。 


CSS3 提供 的 animation 是 一 个 复合 属性 ， 它 包含 了 很 多 子 属 性 。 如 下 表 所 示 : 


属性 说 明 
animation- 用 来 指定 一 个 关键 帧 动画 的 名 称 ， 这 个 动画 名 必须 对 应 一 个 @keyframes 
name 规则 。CSS 加 载 时 会 应 用 animation-name 指定 的 动画 ， 从 而 执行 动画 。 


animation- 用 来 设置 动画 播放 所 需 的 时 间 
duration 


animation- 
timing- 用 来 设置 动画 的 播放 方式 
function 


an ma on ”用 来 指定 动画 的 延迟 时 间 
delay 


animation- 
iteration- 用 来 指定 动画 播放 的 循环 次 数 
count 


animation- 用 来 指定 动画 的 播放 方向 
direction 


animation- 用 来 控制 动画 的 播放 状态 


play-state 

animation- 用 来 设置 动画 的 时 间 外 属性 
fill-mode 

animation 以 上 的 简写 形式 


除了 这 9 个 属性 之 外 ， 动 画 效果 还 有 一 个 重要 的 属性 ， 就 是 关键 帧 属性 : @keyframes。 它 的 
作用 是 声明 一 个 动画 ， 然 后 在 animation 调用 关键 帧 声明 的 动画 。 


// 基 本 格式 ，"name” 可 自 定义 


@keyframes name { 
/A 
} 


二 . 属性 详解 
在 讲解 动画 属性 之 前 ， 先 创建 一 个 基本 的 样式 。 
// 一 个 div 元 素 


<div> 我 是 HTML5</div> 


// 设 置 CSS 


div { width: 200px; height: 200px; border: 1px solid green; 
} 


1.@keyframes 


// 创 建 动画 的 第 一 步 ， 先 声明 一 个 动画 关键 帧 。 


@keyframes myani { 0% { 
margin-left:Qpx; 
} 50% { margin-left:100px; 
} 100% { margin-left:Opx; 
J 


// 或 者 重复 的 ， 可 以 并 列 写 在 一 起 


@keyframes myani { 0%, 100% { 
margin-left:Qpx; 
} 50% { background-color: black; margin-left:100px; 
}} 


2.animation-name 


// 调 用 @keyframes 动画 


animation-name: myani; 


属性 值 说 明 
none 默认 值 ， 没 有 指定 任何 动画 
INDEX 是 由 @keyframes 指定 创建 的 动画 名 称 
3.animation-duration 


// 设 置 动画 播放 的 时 间 


animation-duration: 1s,; 


当然 ， 以 上 通过 关键 帧 的 方式 ， 这 里 插入 了 三 个 关键 帧 。0% 设 置 了 白色 和 左 偏 移 为 0， 和 和 初 
始 状 态 一 致 ， 表 明 从 这 个 地 方 开始 动画 。50% 设 置 了 黑色 ， 左 偏 移 100px。 而 100% 则 是 最 后 
一 个 设置 ， 又 回 到 了 白色 和 左 偏 移 为 0。 整个 动画 就 一 目 了 然 了 。 
而 对 于 关键 帧 的 用 法 ， 大 部 分 用 百分比 比较 容易 控制 ， 当 然 ， 还 有 其 他 一 些 控制 方法 。 
// 从 什么 状态 过 渡 到 什么 状态 
@keyframes myani { from { 
margin-left:Qpx; 


} to { margin-left:100px; 
}} 


4.animation-timing-function 
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// 设 置 缓 动 


animation-timing-function: ease-in; 


默认 值 ,元素 样式 从 初始 状态 过 渡 到 终止 状态 时 速度 由 
快 到 慢 ， 逐 渐变 慢 。 等 同 于 贝 塞 尔 曲 线 (8.25，6.1， 
86.25，1.6) 


元 素 样 式 从 初始 状态 过 渡 到 终止 状态 速度 是 恒 速 。 等 同 
linear 3 
于 贝 塞 尔 曲 线 (6.96，6.6，1.6，1.6) 


元 素 样式 从 初始 状态 过 流 到 终止 状态 时 ， 速 度 越 来 越 
ease-in 快 ， 呈 一 种 加 速 状 态 。 等 同 于 贝 塞 尔 曲线 (9.42，6， 
1.6，1.6) 
元 素 样式 从 初始 状态 过 渡 到 终止 状态 时 ， 速 度 越 来 越 
ease-out 慢 ， 呈 一 种 减速 状态 。 等 同 于 贝 塞 尔 曲 线 (8, 6, 9.58， 
1.6) 
元 素 样式 从 初始 状态 过 渡 到 终止 状态 时 ， 先 加 速 ， 再 减 
速 。 等 同 于 贝 塞 尔 曲线 (6.42，6，6.58，1.6) 


5.animation-delay 





// 设 置 延迟 时 间 
animation-delay: 1s; 
6.animation.-iteration-count 
// 设 置 循环 次 数 
animation-iteration-count: infinite; 
属性 值 说 明 


次 数 默认 值 为 1 
infinite 表示 无 限 次 循环 


7.animation-direction 


// 设 置 绥 动 方 向 交替 


animation-direction: alternate; 
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属性 值 说 明 


normal 默认 值 ， 每 次 播放 向 前 
alternate 一 次 向 前 ， 一 次 向 后 ， 一 次 向 前 ， 一 次 向 后 这 样 交替 


8.animation-play-state 

// 设 置 停止 播放 动画 
animation-play-state: paused; 

9.animation-fill-mode 

// 设 置 结束 后 不 在 返回 


animation-fill-mode: forwards 


属性 值 说 明 
none 默认 值 ， 表 示 按 预期 进行 和 结束 
forwards 动画 结束 后 继续 应 用 最 后 关键 帧 位 置 ， 即 不 返回 
backforwards 动画 结束 后 迅速 应 用 起 始 关键 帧 位 置 ， 即 返回 
both 根据 情况 产生 forwards 或 backforwards 的 效果 


/both 需要 结合 ， 次 数 和 播放 方向 animation-iteration-count: 4; animation-direction: alternate; 


六 .简写 和 版 本 


animation: myani 1s ease 2 alternate Qs both,; 


为 了 兼容 旧版 本 ， 需 要 加 上 相应 的 浏览 器 前 级 ， 版 本 信息 如 下 表 : 


Opera Firefox Chrome Safari IE 
支持 需 带 前 级 15 ~ 29 5S~15 4~42 4~8 无 
支持 不 带 前 级 无 16+ 43+ 无 10.0+ 
// 兼 容 完整 版 ，Opera 在 这 个 属性 上 加 入 Webkit， 所 以 没有 


-0--webkit-animation: myani 1s ease 2 alternate Qs both ; 
-moz-animation: myani 1s ease 2 alternate 0s both; 
-ms-animation: myani 1s ease 2 alternate 0Ss both; 
transition: all 1s ease 0s; 


//@keyframes 也 需要 加 上 前 级 


@-webkit-keyframes myani {...} @-moz-keyframes myani {...} @-o-keyframes myani {...} @-ms 


<| = | 
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学 习 要 点 : 
1. 布 局 模型 
2. 表 格 布局 
3. 浮 动 布局 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 早期 所 使 用 的 传统 布局 ， 很 多 情况 下 ， 这 些 布局 方式 还 是 非常 
有 用 的 。 


一 布局 模型 

在 早 其 Sa ed 的 时 期 ，Web 页 面 的 设计 主要 是 面向 PC 端 
电脑 分 辩 率 展开 的 。 这 种 分 辩 率 比例 比较 单一 ， 要 满足 最 低 分 辩 率 设计 即 可 。 一 般 
来 说 有 4:3、16:10、16:9 这 样 的 主要 分 辨 率 。 那 么 这 种 比例 上 来 看 ， 长 度 总 是 大 于 宽度 


的 。 从 最 低 分 辩 举 1024* 768 设计 即 可 。 为 了 使 浏览 、 出 现 滚 动 条 ， 需 要 减 去 适当 的 
宽度 ， 比 如 减 去 28， 最 终 固定 长 度 设置 为 996 即 可 。 当 然 ， 也 有 一 些 网 站 在 近 两 年 讲 最 低 分 
辨 率 设置 为 1280 减 去 滚动 条 宽度 ， 因 为 大 显示 器 逐步 主流 。 


除了 刚才 所 说 的 国定 长 度 的 布局 ， 还 有 一 种 是 流体 布局 ， 就 是 布局 的 长 度 为 百分比 ， 比 如 
100%。 不 管 你 是 什么 分 辨 率 ， 它 都 能 全 屏 显 示 ， 当 然 ， 局 限 性 也 特别 大 ， 只 适合 一 些 单 一 
面 ， 复 杂 的 页 面 ， 会 随 着 不 同 浏览 器 产生 各 种 阅读 障碍 。 


我 们 创建 一 个 三 行 两 列 模型 。 并 采用 表格 布局 和 淳 动 布局 ， 构 建国 定 和 流体 布局 的 方式 ， 模 
型 图 如 下 : 





二 :表格 布局 


表格 布局 ， 就 是 通过 设 定 国定 的 单元 格 ， 去 除 表 格 边框 和 填充 实现 的 布局 。 当 然 这 个 布局 非 
号 是 人 


常 不 建议 使 用 ， 只 是 教学 了 解 。 表 格 应 该 用 它 最 为 语义 的 地 方 ， 就 是 二 维 表 的 数据 显示 。 


1. 固 定 布局 


/HHTML 部 分 


<table border="0"> 
<tr> 
<td colspan="2" class="header">header</td> 
</tr> 
写作 
<td class="aside">aside</td> 
<td class="section">section</td> 
</tr> 
芝 忆 广泛 
<td colspan="2" class="footer">footer</td> 
</tr> 
</table> 


/ICSS 部 分 


body { margin: 09; 

} table { margin: © auto; width: 960px; border-spacing: 0; 
} .header { height: 120px; 

} .aside { width: 200px; height: 500px; 

} .section { width: 760px; height: S500px; 

} .footer { height: 120px; 

} 


2. 流 体 布局 
表格 的 国定 布局 改 成 流体 布局 非常 简单 ， 只 需要 设置 table 为 100% 即 可 。 


/修改 table 


table { width: 100%; 
} 


三 ,浮动 布局 
浮动 布局 主要 采用 float 和 clear 两 个 属性 来 构建 。 
1. 固 定 布局 
/HTML 部 分 
<header> header </header> 
<aside> aside </aside> 


<section> section </section> 


<footer> footer </footer> 


/1/ICSS 部 分 


body { width: 960px; margin: © auto; color: white; 

} header { height: 120px; 

} aside { width: 200px; height: 500px; float: left; 

} section { width: 760px; height: 500px; float: right; 
} footer { height: 120px; clear: both; 

} 


2.** 流 体 布 局 * 


流体 布局 只 要 更 改 body 元 素 的 限定 长 度 为 auto 或 100%。 然 后 左右 两 列 分 别 设置 20% 和 
80% 即 可 。 


/CSS 部 分 


body { width: auto; 

} aside { width: 20%; 
} section { width: 80%; 
} 
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学 习 要 点 : 

1. 定 位 布局 
2.box-sizing 
3.resize 

主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS 早期 所 使 用 的 传统 布局 ， 很 多 情况 下 ， 这 些 布局 方式 还 是 非常 
有 用 的 。 


一 定位 布局 


在 使 用 定位 布局 前 ， 我 们 先 了 解 一 下 定位 属性 的 用 法 。CSS2 提供 了 position 属性 来 实现 元 素 
的 绝对 定位 和 相对 定位 。 


属性 说 明 
static 默认 值 ， 无 定位 。 
absolute 绝对 定位 ， 使 用 top、right、bottom、left 进 行 位 移 。 
relative 相对 定位 ， 使 用 top、right、bottom、left 进 行 位 移 。 
fixed 以 窗口 参考 定位 ， 使 用 top、right、bottom 、left 进行 位 移 。 


// 绝 对 定位 ， 脱 离 文档 流 ， 以 窗口 文档 左上 角 0,0 为 起 点 


header { position: absolute; top: 100px; left: 100px; 


所 谓 脱离 文档 流 的 意思 ， 就 是 本 身 这 个 元 素 在 文档 流 是 占 位 的 。 如 果 脱 离 了 ， 就 不 占有 文档 
的 位 置 ， 好 像 浮 在 了 空中 一 般 ， 有 了 层次 感 。 


由 于 绝对 定位 脱离 了 文档 流 ， 出 现 层次 概念 。 那 么 每 个 元 素 到 底 在 那 一 层 ， 会 不 会 冲突 履 
盖 。 这 时 通过 z-index 属性 来 判定 它们 的 层次 关系 。 
属性 说 明 
auto 默认 层次 


数字 设置 层次 ， 数 字 越 大 ， 层 次 越 高 


/设置 在 100 层 上 


header { z-index: 100; 
} 


// 以 窗口 参考 定位 ， 脱 离 文档 流 ， 会 随 着 滚动 条 滚动 而 滚动 


header { position: fixed; top: 100px left: 100px 


// 相 对 定位 ， 不 脱离 文档 流 ， 占 位 偏 移 


header { position: relative; top: 100px; left: 100px; 
} 


这 三 种 分 别 都 在 各 自 的 情况 下 使 用 ， 均 比较 常用 。 但 还 有 一 种 情况 ， 就 是 : 1. 既 要 脱离 文档 流 
(这 样 元 素 之 间 不 会 相互 冲突 ) 3 2. 以 父 元 素 9 比如 body 或 其 他 父 元 素 为 参考 点 (这 样 可 以 
实现 区 域 性 绝对 定位 ) ;3. 还 必须 是 绝对 定位 。 


// 第 一 步 ， 将 需要 设置 参考 点 的 父 元 素 设 置 为 相对 ， 且 不 设置 坐标 


body { position: relative; 


// 第 二 步 ， 如 果 父 元 素 设 置 了 参考 点 ， 子 元 素 的 绝对 定位 将 以 它 为 基准 


header { position: absolute; top: Opx; left: Opx; 


1.** 固 定 布局 ** 
/ICSS 部 分 


body { width: 960px; margin: © auto; position: relative; 

} header { width: 960px; height: 120px; position: absolute; top: 0; left: 0; 

} aside { width: 200px; height: 500px position: absolute; top: 120px; left: ©; 

} section { width: 760px; height: S500px; position: absolute; top: 120px; /*left: 200px;*/ 
} footer { width: 960px; height: 120px; position: absolute; top: 620px; 
} 


二 == 一 J 


在 上 面 ， 基 本 都 用 了 定位 来 进行 固定 布局 。 但 细心 的 可 以 发 现 ， 其 实 只 有 右 侧 需 要 实行 绝对 
定位 ， 其 他 就 按照 普通 的 摆 放 即 可 。 对 于 设计 成 流体 布局 ， 只 要 将 长 度 设置 成 百分比 即 可 。 





二 ，**box-sizing 入 


在 使 模型 那个 章节 ， 我 们 了 解 到 元 素 盒子 如 果 加 入 了 内 边 距 padding 和 边框 border 后 ， 它 的 
总 长 度 会 增加 。 那 么 sh 精确 的 布局 时 ， 我 们 就 需要 进行 计算 增 减 。 这 其 
实 是 比较 烦人 的 操作 ， 尤 其 是 动态 设置 页 面 布局 的 时 候 。 


CSS3 提供 了 一 个 属性 box-sizing， 这 个 属性 可 以 定义 元 素 盒子 的 解析 方式 ， 从 而 可 以 选择 避 
免 掉 布局 元 素 盒子 增加 内 边 距 和 边框 的 长 度 增 减 问题 。 


属性 说 明 
content-box 默认 值 ，border 和 padding 设置 后 用 于 元 素 的 总 长 度 。 
border-box border 和 padding 设置 后 不 用 于 元 素 的 总 长 度 。 


// 设 置 border-box 让 border 和 padding 不 在 额外 增加 元 素 大 小 


aside { width: 200px; height: S500px; background-color: purple; padding: 10px; border: 5pX 
} 


加 | 


box-sizing 是 CSS3 推出 的 ， 各 个 厂商 在 实现 时 设置 了 私有 前 级 。 





Opera Firefox Chrome Safari IE 
支持 需 带 前 级 无 2~28 4~9 3.1~5 8.0+ 
支持 不 带 前 级 10.1+ 29+ 10+ 6+ 9.0+ 


// 完 整形 式 


-webkit-box-sizing: border-box; 
-moz-box-Sizing: border-box; 
-ms-box-sizing: border-box; 
box-sizing: border-box; 


三 **resize** 


CSS3 提供 了 一 个 resize 属性 ， 来 更 改元 素 尺 寸 大 小 。 


属性 说 明 
none 默认 值 ， 不 允许 用 户 调整 元 素 大 小 。 
both 用 户 可 以 调节 元 素 的 宽度 和 高 度 。 
horizontal 用 户 可 以 调节 元 素 的 宽度 。 
vertical 用 户 可 以 调节 元 素 的 高 度 。 


一 般 普 通 元 素 ， 默 认 值 是 不 允许 的 。 但 如 果 是 表单 类 的 textarea 元 素 ， 默 认 是 允许 的 。 而 普 
通 元 素 需 要 设置 overflow:auto， 配 合 resize 才 会 出 现 可 拖 搜 的 图 形 。 


/允许 修改 


aside { resize: both; overflow: auto 


} 


第 28 章 CSS3 多 列 布局 


学 习 要 点 : 

1. 早 期 多 列 问题 
2. 属 性 及 版 本 
3. 属 性 解释 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 HTML5 中 CSS3 提供 的 多 列 布局 ， 通 过 多 列 布局 我 们 方便 的 创建 流体 的 多 列 
布局 。 


一 .早期 多 列 问 题 


我 们 有 时 想 布局 成 报纸 、 杂 志 那 样 的 多 列 方式 (至少 两 列 ， 一 般 三 列 以 上 ) ， 但 早期 CSS 提 
供 的 布局 方式 都 有 着 极 大 的 限制 。 如 果 是 固体 布局 ， 那 么 使 用 浮动 或 定位 布局 都 可 以 完成 。 
但 对 于 流体 的 多 列 ， 比 如 三 列 以 上 ， 那 只 能 使 用 浮动 布局 进行 ， 而 它 又 有 极 大 的 限制 。 因 为 
它 是 区 块 性 的 ， 对 于 动态 的 内 容 无 法 伸缩 自 适 应 ， 基 本 无 能 力 。 


// 五 段 内 容 ， 分 为 三 列 


<div> 
<p> 我 是 第 一 段 内 容 .,. .省 略 的 部 分 复制 大 量 文本 </p> 
<p> 我 是 第 二 段 内 容 .,. .省 略 的 部 分 复制 大 量 文本 </p> 
<p> 我 是 第 三 段 内 容 .,. .省 略 的 部 分 复制 大 量 文本 </p> 
<p> 我 是 第 四 段 内 容 .,. .省 略 的 部 分 复制 大 量 文本 </p> 
<p> 我 是 第 五 段 内 容 .,. .省 略 的 部 分 复制 大 量 文本 </p> 
</div> 


// 带 标题 的 五 段 内 容 ， 分 为 三 列 


<div> 
<h4> 第 一 段 标题 </h4> 
<p> 我 是 第 一 段 内 容 ... .省 略 的 部 分 复制 大 量 文 本 </p> 
<h4> 第 二 段 标 题 </h4> 
<p> 我 是 第 二 段 内 容 ... .省 略 的 部 分 复制 大 量 文 本 </p> 
<h4> 第 三 段 标题 </h4> 
<p> 我 是 第 三 段 内 容 ... .省 略 的 部 分 复制 大 量 文 本 </p> 
<h4> 第 四 段 标题 </h4> 
<p> 我 是 第 四 段 内 容 ... .省 略 的 部 分 复制 大 量 文 本 </p> 
<h4> 第 五 段 标题 </h4> 
<p> 我 是 第 五 段 内 容 ... .省 略 的 部 分 复制 大 量 文 本 </p> 
</div> 








门 两 组 内 容 ， 如 果 想 用 浮动 和 定位 实现 流体 三 列 ， 基 本 不 可 能 。 并 且 实 际 应 用 中 ， 需 求 可 
多 变 ， 要 更 改 成 四 列 或 者 五 列 呢 ? 所 以 ，CSS3 提供 了 多 列 布局 属性 columns 来 实现 这 个 
态 变换 的 功能 。 


站 全 上 


二 . 属性 及 版 本 


CSS3 提供 了 columns 多 列 布局 属性 等 7 个 属性 集合 ， 有 具体 如 下 : 


属性 说 明 
columns 集成 column-width 和 column-count 两 个 属性 
column-width 定义 每 列 列 宽度 
column-count 定义 分 分 列 列 数 
column-gap 定义 列 间距 
column-rule 定义 列 边框 
column-span 定义 多 列 布局 中 子 元 素 跨 列 效 果 ，firefox 不 支持 
column-fill 控制 每 列 的 列 高 效果 ， 主 流 浏览 器 不 支持 


由 于 column 属性 集 尚 未 纳入 标准 ， 大 多 数 浏览 器 必须 使 用 厂商 前 组 才能 访问 ， 好 在 主流 的 浏 
览 器 都 可 以 很 好 的 支持 了 。 下 面 是 主流 浏览 器 的 支持 和 前 级 情况 。 


Opera Firefox Chrome Safari IE 
支持 需 带 前 级 11.5 ~ 29 2~40 4~45 3.1~8 无 
支持 不 带 前 级 Ze 2 76 2 10.0+ 


通过 上 面 的 表格 ， 我 们 可 以 了 解 到 ， 要 想 让 最 新 的 浏览 器 全 部 实现 效果 ， 都 必须 使 用 前 级。 


/完整 形式 


-webkit-columns: 150px 4; 
-moz-columns: 150px 4; 
columns: border-box; 


为 了 方便 演示 ， 我 们 在 Firefox 火狐 浏览 器 测试 ， 只 用 -moz- 前 级 演示 。 
1.columns 


columns 是 一 个 复合 属性 ， 和 包含 columns-width 和 columns-count 这 两 种 简写 。 意 为 同时 设 
置 分 列 列 数 和 分 列 宽度 。// 分 成 四 列 ， 每 列 宽 度 自 适 应 


-moz-columns: auto 4; 


2.column-width 


column-width 属性 ， 用 于 设置 每 列 的 宽度 。 


// 设 置 列 宽 


-moz-column-width: 200px; 


这 里 设置 了 200px， 有 点 最 小 宽度 的 意思 。 当 浏览 器 缩放 到 小 于 200 大 小 时 ， 将 变 成 1 列 显 
示 。 而 如 果 是 auto， 则 一 直 保 持 四 列 。 


属性 说 明 
auto 默认 值 ， 自 适应 。 
长 度 值 设置 列 宽 。 
3.column-count 


column-count 属性 ， 用 于 设置 多 少 列 。 


// 设 置 列 数 


-moz-column-count: 4; 


属性 值 说 明 
auto 默认 值 ， 表 示 就 1 列 。 
数值 设置 列 数 。 
4.column-gap 


column-gap 属性 ， 用 于 设置 列 间距 


// 设 置 列 间距 


-moz-column-gap: 100px; 


属性 值 说 明 
auto 默认 值 ， 表 示 就 1 列 。 
数值 设置 列 数 。 
5.column-rule 


column-rule 属性 ， 设 置 每 列 中 间 的 分 割 线 // 设 置 列 边线 


-moz-column-rule: 2px dashed gray; 


属性 说 明 


column-rule < 宽度 > < 样式 > < 颜色 > 的 边框 简写 形式 。 
column-rule-width 单独 设置 边框 宽度 。 

column-rule-style 单独 设置 边框 的 样式 。 
column-rule-color 单独 设置 边框 的 颜色 。 


列 边线 不 会 影响 到 布局 ， 它 会 根据 布局 的 缩放 自我 调整 是 否 显示 。 如 果 我 们 把 页 面 缩放 到 只 
能 显示 一 列 时 ， 它 自动 消失 了 。 


6.column-span 
column-span 属性 ， 设 置 跨 列 大 标题 。 


// 跨 列 标题 ， 由 于 火狐 尚未 支持 ， 固 使 用 webkit 
-webkit-column-span: all; 
属性 说 明 


none 默认 值 ， 表 示 不 跨 列 。 
all 表示 跨 列 。 


第 29 章 CSS3 弹性 伸缩 布局 [上 ] 


学 习 要 点 : 

1. 布 局 简介 

2. 昌 版 本 

主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 CSS3 提供 的 用 来 实现 未 来 响应 式 弹 性 伸缩 布局 方案 ， 这 里 做 一 个 
初步 的 了 解 。 


一 -布局 简介 


CSS3 提供 一 种 才 新 的 布局 方式 : Flexbox 布局 ， 即 弹性 伸缩 布局 模型 (Flexible Box)。 用 来 提 
供 一 个 更 加 有 效 的 方式 实现 响应 式 布局 。 但 是 用 于 这 个 布局 方式 还 处 于 W3C 的 草案 阶段 ， 并 
且 它 还 分 为 旧版 本 、 新 版 本 以 及 混合 过 渡 版 本 三 种 不 同 的 编码 方式 。 在 发 展 中 ， 可 能 还 有 各 
种 改动 ， 浏 览 器 的 兼容 性 还 存在 问题 。 所 以 ， 本 节 课 作为 初步 了 解 即 可 。 


首先 ， 我 们 来 看 下 旧版 本 的 浏览 器 兼容 情况 : 


Flexbox 虽 版 本 兼容 情况 


属性 IE Firefox Chrome Opera Safari 
带 前 级 无 4 一 25 4~31 195 一 8 5.:17 二 
不 带 前 组 2 无 2 无 b 


以 上 的 数据 ， 我 们 摘自 CSS3 手册 上 的 。 当 然 ， 不 同 的 教材 和 文章 的 会 略 有 不 同 。 但 误差 率 
也 就 一 到 两 个 版 本 ， 影 响 不 大 。 
首先 ， 第 一 步 : 先 创 建 一 段 内 容 ， 分 成 三 个 区 域 。 
/HTML 部 分 
<div> 
<p> 第 一 段 内 容 ... </p> 
<p> 第 二 段 内 容 .. .</p> 


<p> 第 三 段 内 容 ... </p> 
</div> 


/CSS 部 分 


p { width: 150px; border: 1px solid gray; margin: 5px padding: Spx; 
} div { display: -moz-box; display: -webkit-box; display: box; 


通过 以 上 设置 ， 在 除了 IE 浏览 器 外 ， 布 局 实现 了 水 平分 布 。 那 么 下 面 ， 我 们 就 重点 研究 一 下 
这 些 属性 的 含义 。 
二 .旧版 本 


如 果 属 性 和 属性 值 为 : ei 么 就 是 2009 年 7 月 份 设 定 的 工作 草案 ， 属 于 旧版 本 。 
它 面向 的 是 一 些 早 期 浏览 器 的 弹性 布局 方案 。 


首先 ， 我 们 要 将 几 个 需要 布局 模块 的 父 元 素 设置 一 下 容器 属性 display 。 


属性 值 说 明 
box 将 容器 盒 模型 作为 块 级 弹性 伸缩 盒 显 示 (上 下 版 本 ) 
inline-box 将 容器 盒 模型 作为 内 联 级 弹性 伸缩 盒 显 示 (旧版 本 ) 


我 们 知道 块 级 它 是 占用 整 行 的 ， 类 似 <div> 元 素 ; 而 内 联 级 不 占用 整 行 ， 类 似 <span> 元 素 。 但 
是 我 们 设置 了 整个 盒子 ， 他 们 都 不 占用 ， 保 持 一 致 。 


// 设 置 弹性 ， 以 火狐 为 例 


div { display: -moz-box; 


1.box-orient 属性 


box-orient 主要 实现 盒子 内 部 元 素 的 流动 方向 。 


// 设 置 重 直 流动 
div { -webkit-box-orient: vertical; 
} 

属性 值 说 明 

horizontal 伸缩 项 目 从 左 到 右 水 平 排列 
vertical 伸缩 项 目 从 上 到 下 垂直 排列 
inline-axis 伸缩 项 目 沿 着 内 联 轴 排 列 显示 
block-axis 伸缩 项 目 沿 着 块 轴 排 练 显示 








2.box-direction 
box-direction 属性 主要 是 设置 伸缩 容器 中 的 流动 顺序 。 


/设置 逆序 


div { -moz-box-direction: reverse,; 


} 
属性 值 说 明 
normal 默认 值 ， 正 常 顺序 
reverse 逆序 
3.box-pack 


box-pack 属性 用 于 伸缩 项 目的 分 布 方式 。 


// 分 布 方式 已 结束 位 置 靠 齐 


div { -moz-box-pack: end; 





} 
属性 值 说 明 
start 伸缩 项 目 以 起 始点 靠 齐 
end 伸缩 项 目 以 结束 点 靠 齐 
center 伸缩 项 目 以 中 心 点 靠 齐 
justify 伸缩 项 目 平局 分 布 ，-webkit- 支 持 ，-moz- 不 支持 
4.box-align 


box-align 属性 用 来 处 理 伸 缩 容 器 的 额外 空间 。// 居 中 对 齐 ， 清 理 上 下 额外 空间 


div { -moz-box-align: center; 








} 
属性 值 说 明 
start 伸缩 项 目 以 顶部 为 基准 ， 清 理 下 部 额外 空间 
end 伸缩 项 目 以 底部 为 基准 ， 清 理 上 部 额外 空间 
center 伸缩 项 目 以 中 部 为 基准 ， 平 均 清 理 上 下 部 额外 空间 
baseline 伸缩 项 目 以 基线 为 基准 ， 清 理 额 外 的 空间 
stretch 伸缩 项 目 填充 整个 容器 ， 默 认 
5.box-flex 


box-flex 属性 可 以 使 用 浮 点 数 分 配 伸缩 项 目的 比例 // 设 置 每 个 伸缩 项 目 占用 的 比例 


p:nth-child(1) { -moz-box-flex: 1; 

} p:nth-child(2) { -moz-box-flex: 2.5; 
} p:nth-child(3) { -moz-box-flex: 1; 
} 


6.box-ordinal-group 
box-ordinal-group 属性 可 以 设置 伸缩 项 目的 显示 位 置 。 


// 将 第 一 个 位 置 的 元 素 ， 跳 转 到 第 三 个 位 置 


p:nth-child(1) { -moz-box-ordinal-group: 3; 
} 


第 29 章 CSS3 弹性 伸缩 布局 [中 ] 


学 习 要 点 : 
1.» 混合 过 度 版 
主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 CSS3 提供 的 用 来 实现 未 来 响应 式 弹性 伸缩 布局 方案 ， 这 里 做 一 个 
初步 的 了 解 。 


一 :混合 过 渡 版 


混合 版 本 的 Flexbox 模型 是 2011 年 提出 的 工作 草案 ， 主 要 是 针对 IE10 浏览 器 实现 的 伸缩 布 
局 效果 ， 其 功能 和 旧版 本 的 属性 大 同 小 异 。 上 一 节 课 的 文件 ， 然 后 使 用 混合 过 
渡 代 码 ， 实 现 IE10 的 伸缩 布局 。 


首先 ， 设 置 伸 缩 盒 的 display 有 如 下 两 个 属性 值 


属性 值 说 明 
flexbox 将 容器 盒 模型 作为 块 级 弹性 伸缩 盒 显 示 (混合 版 本 ) 
inline-flexbox 将 容器 盒 模型 作为 内 联 级 弹性 伸缩 盒 显 示 (混合 版 本 ) 


// 需 要 IE 前 级 -ms- 


div { display: -ms-flexbox; 
} 


1.flex-direction 


flex-direction 属性 和 日 版 本 box-orient 属性 一 样 ， 都 是 设置 伸缩 项 目的 排列 方式 。 


/设置 从 上 往 下 排列 
div { -ms-flex-direction: column; 
} 
属性 值 说 明 
row 设置 从 左 到 右 排 列 
row-reverse 设置 从 右 到 左 排 列 
column 设置 从 上 到 下 排列 





column-reverse 设置 从 下 到 上 排列 


2.flex-wrap 


flex-wrap 属性 类 似 与 旧版 本 中 的 box-lines， 但 是 box-lines 我 们 没有 讲解 ， 原 因 是 没有 浏 


器 支持 它 。 
// 设 置 无 法 容纳 时 ， 自 动 换行 


div { -ms-flex-wrap: wrap; 


} 
属性 值 说 明 
nowrap 默认 值 ， 都 在 一 行 或 一 列 显示 
wrap 伸缩 项 目 无 法 容纳 时 ， 自 动 换行 
wrap-reverse 伸缩 项 目 无 法 容纳 时 ， 自 动 换行 ， 方 向 和 wrap 相反 
3.flex-flow 


flex-flow 属性 是 集合 了 排列 方向 和 控制 换行 的 简写 形式 。 
// 简 写 形式 


div { -ms-flex-flow: row wrap; 


} 


4.flex-pack 
flex-pack 属性 和 旧版 本 中 的 box-pack 一 样 ， 设 置 伸缩 项 目的 对 其 方式 。 


/按照 中 心 点 对 齐 


div { -ms-flex-pack: center ; 








} 
属性 值 说 明 
start 伸缩 项 目 以 起 始点 车 齐 
end 伸缩 项 目 以 结束 点 靠 齐 
center 伸缩 项 目 以 中 心 点 算 齐 
justify 伸缩 项 目 平局 分 布 
5.flex-align 


flex-align 属性 和 旧版 本 中 的 box-align 一 样 ， 处 理 伸 缩 项 目 容 器 的 额外 空间 。 


// 处 理 额 外 空间 


大 
见 


div { -ms-flex-align: center; 








} 
属性 值 说 明 
start 伸缩 项 目 以 顶部 为 基准 ， 清 理 下 部 额外 空间 
end 伸缩 项 目 以 底部 为 基准 ， 清 理 上 部 额外 空间 
center 伸缩 项 目 以 中 部 为 基准 ， 平 均 清 理 上 下 部 额外 空间 
baseline 伸缩 项 目 以 基线 为 基准 ， 清 理 额外 的 空间 
stretch 伸缩 项 目 填充 整个 容器 ， 黑 认 
6.flex 


flex 属性 和 旧版 本 中 的 box-flex 类 似 ， 用 来 控制 伸缩 容器 的 比例 分 


// 设 置 比例 分 配 


p:nth-child(1) { -ms-flex: 1; 

} p:nth-child(2) { -ms-flex: 3; 
} p:nth-child(3) { -ms-flex: 1; 
} 


7.flex-order 
flex-order 属性 和 box-ordinal-group 属性 一 样 控 惠 


// 设 置 伸缩 项 目 顺序 


p:nth-child(1) { -ms-flex-order: 2; 

} p:nth-child(2) { -ms-flex-order: 3; 
} p:nth-child(3) { -ms-flex-order: 1; 
} 


伸缩 项 目 出 现 的 顺序 。 


第 29 章 CSS3 弹性 伸缩 布局 [下 ] 


学 习 要 点 : 
1. 新 版 本 
主讲 教师 : 李 炎 恢 


本 章 主 要 探讨 HTML5 中 CSS3 提供 的 用 来 实现 未 来 响应 式 弹 性 伸缩 布局 方案 ， 这 里 做 一 个 
初步 的 了 解 。 


一 :新 版 本 
ss 这 个 草案 是 由 W3C 推出 的 最 新 语 
法 。 这 个 版 本 立志 定 标准 ， 让 新 式 的 浏览 器 全 面 兼容 ， 在 未 来 浏览 器 的 更 新 换代 中 实现 
了 统一 。 


首先 ， 设 置 伸缩 盒 的 display 有 如 下 两 个 属性 值 


属性 值 说 明 
flex 将 容器 盒 模型 作为 块 级 弹性 伸缩 盒 显 示 〈 新 版 本 ) 
inline-flex 将 容器 盒 模型 作为 内 联 级 弹性 伸缩 盒 显 示 (新 版 本 ) 


// 大 部 分 不 需要 前 级 


div { display: flex; 


属性 IE Firefox Chrome Opera Safari 
带 前 级 无 无 21~ 28 无 7.0 
不 带 前 级 11+ 20+ 29+ 2 天 


人 这 张 表 可 以 看 出 ， 只 有 webkit 引擎 的 浏览 器 Chrome 和 Safari 的 版 本 需要 添加 -webkit- ， 
而 Chrome 浏览 器 29 版 本 以 后 可 以 省 略 了 。 


1.flex-direction 
flex-direction 属性 和 日 版 本 box-orient 属性 一 样 ， 都 是 设置 伸缩 项 目的 排列 方式 。 


// 设 置 从 上 往 下 排列 


div { flex-direction: column; 


属性 值 说 明 





row 设置 从 左 到 右 排 列 

row-reverse 设置 从 右 到 左 排 列 

column 设置 从 上 到 下 排列 

column-reverse 设置 从 下 到 上 排列 
2.flex-wrap 


flex-wrap 属性 类 似 与 昌 版 本 中 的 box-lines， 但 是 box-lines 我 们 没有 讲解 ， 原 因 是 没有 浏览 
器 支持 它 。 


// 设 置 无 法 容纳 时 ， 自 动 换行 


div { -ms-flex-wrap: wrap; 


} 
属性 值 说 明 
nowrap 默认 值 ， 都 在 一 行 或 一 列 显示 
wrap 伸缩 项 目 无 法 容纳 时 ， 自 动 换行 
wrap-reverse 伸缩 项 目 无 法 容纳 时 ， 自 动 换行 ， 方 向 和 Wrap 相反 
3.flex-flow 


flex-flow 属性 是 集合 了 排列 方向 和 控制 换行 的 简写 形式 。 
// 简 写 形式 


div { flex-flow: row wrap; 


} 


4.justify-content 
justify-content 属性 和 旧版 本 中 的 box-pack 一 样 ， 设 置 伸缩 项 目的 对 其 方式 。 


// 按 照 中 心 点 对 齐 


div { justify-content: space-around; 


属性 值 说 明 








flex-start 伸缩 项 目 以 起 始点 靠 齐 
flex-end 伸缩 项 目 以 结束 点 靠 齐 
center 伸缩 项 目 以 中 心 点 靠 齐 
space-between 伸缩 项 目 平 局 分 布 
space-around 同上 ， 但 两 端 保留 一 半 的 空间 


5.align-items 
align-items 属性 和 旧版 本 中 的 box-align 一 样 ， 处 理 伸 缩 项 目 容 器 的 额外 空间 。 


/处理 额外 空间 


div { align-itmes: Center ; 





属性 值 说 明 
flex-start 伸缩 项 目 以 顶部 为 基准 ， 清 理 下 部 额外 空间 
flex-end 伸缩 项 目 以 底部 为 基准 ， 清 理 上 部 额外 空间 
center 伸缩 项 目 以 中 部 为 基准 ， 平 均 清理 上 下 部 额外 空间 
baseline 伸缩 项 目 以 基线 为 基准 ， 清 理 额外 的 空间 
stretch 伸缩 项 目 填充 整个 容器 ， 默 认 





6.align-self 


align-self 和 align-items 一 样 ， 都 是 清理 额外 空间 ， 但 它 是 单独 设置 某 一 个 伸缩 项 目的 。 所 有 
的 值 和 align-itmes 一 致 。 


// 单 独 设 置 清理 额外 空间 


p:nth-child(2) { align-self: center ; 
} 


7.flex 
flex 属性 和 日 版 本 中 的 box-flex 类 似 ， 用 来 控制 伸缩 容器 的 比例 分 
// 设 置 比例 分 配 


p:nth-child(1) { flex: 1; 

} p:nth-child(2) { flex: 3; 
} p:nth-child(3) { flex: 1; 
} 


8.order 
order 属性 和 box-ordinal-group 属性 一 样 控制 伸缩 项 目 出 现 的 顺序 。 


// 设 置 伸缩 项 目 顺 序 


p:nth-child(1) { order: 2; 
} p:nth-child(2) { order: 3; 
} p:nth-child(3) { order: 1; 
} 


第 30 章 使 用 Emmet 插件 


学 习 要 点 : 
1. 安 装 方式 
2. 自 定义 ! 生成 
3. 快 速生 成 
主讲 教师 : 李 炎 恢 


本 章 主要 探讨 了 解 一 下 Sublime Text3 的 一 个 HTML5 代码 提示 插件 : Emmet， 这 个 插件 比 自 
带 原 生 的 要 强大 许多 。 


“ 安装 方式 


计 


Emmet 插件 安装 一 般 采 用 两 种 方式 ，1. 通 过 命令 安装 ; 2. 下 载 离线 安装 。 我 这 里 直接 采用 的 
是 下 载 离 线 安装 方式 。 具 体 步 骤 : 


1. 解 压 下 载 好 的 Emmet 插件 包 ( 这 里 会 提供 ) ; 
2. 将 Emmet 和 PyV8 两 个 文件 夹 复制 到 Sublime Text3 的 程序 包 中 ; 


左下 角 会 显示 自动 安装 ， 安 装 好 后 ， 重 启 Sublime Text3 ; 4. 在 编辑 器 输入 英文 状态 下 
， 然 后 ctrl+e， 出 现 了 HTML5 的 代码 库 ， 则 安装 


成 功 。 

注 : 如 果 安 装 失败 或 出 现 其 他 错误 ， 请 自行 百度 选用 其 他 方式 安装 ， 或 解决 安装 出 错 的 问 
题 。 

二 自 定 义 ! 生 成 


我 们 输入 !， 然 后 ctrl+e， 默 认 情 况 下 会 出 现 如 下 代码 : 


/默认 代码 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
</head> 
<body> 


</body> 
</html> 


这 里 有 两 个 地 方 和 我 们 之 前 生成 的 代码 不 一 样 ， 第 一 处 是 : doctype 没有 大 写 ; 第 二 处 : lang 
是 en 的 。 其 实 这 两 处 不 改 也 没有 太 大 关系 ， 但 有 强迫 症 的 看 了 可 能 会 难受 。 具 体 修 改 方法 如 
下 


1. 首 先 ， 进 入 程序 包 pagkages ; 

2. 其 次 ， 进 入 Emmet 文件 夹 ， 再 进入 emmet 文件 夹 ， 找 到 snippets.json 文件 ; 
3. 最 后 ， 打 开 这 个 文件 ， 找 到 相应 处 修改 即 可 。 

三 :快速 生成 


0 。 只 不 过 ，Emmet 习 ， 起 初 可 能 还 不 如 手工 
敲 击 的 快 。 所 以 ， 需 要 一 定时 间 的 学 习 磨 合 。 


// 快 速生 成 HTML5 代码 结构 


+ (ctrl+ e 或 tab 键 ) 或 html:5 + tab 键 


<!DOCTYPE htm]> 
<html lang="zh-cn"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
</head> 
<body> 


</body> 
</html> 


所 有 代码 生成 ， 都 需要 通过 tab 键 来 生成 代码 ， 后 面 不 在 袭 述 。 
// 快 速生 成 标签 代码 a 


<a href=""></a> 
// 快 速生 成 标签 相应 的 属性 值 a:link、a:mail 


<a href="http://"></a> 


&lt;a href="mailto:"&gt;&lt;/aggt; 


// 生 成 标签 内 的 值 a{ 超 链接 } 


<a href=""> 超 链接 </a> 


// 生 成 CSS 链接 link link 


<link rel="stylesheet" href=""> 


// 生 成 表单 控件 input、input:hidden 


<input type="text"> 
<input type="hidden" name=""> 


// 生 成 带子 标签 的 一 组 标签 ult+、ol+、dl+、table+ 


<ul> 
<1i></1i> 
</ul> 


<ol> 
<1i></1i> 
</O1> 


<dl> 
<dt></dt> 
<dd></dd> 
</dl1> 


<table> 
tT 
<td></td> 


</tr> 
</table> 


// 生 成 葡 套 子 标签 nav>ul>ii 


<nav> 
<ul> 
<1i></1i> 
</ul> 
</nav> 


// 生 成 相 邻 兄弟 标签 div+p+h1 


<div></div> 
<p></p> 


<h1i></h1> 


// 生 成 乘积 数量 的 标签 Ul>li*5 


<ul> 
<1i></1i> 


<1i></1i> 
<1i></1i> 
<1i></1i> 


<1i></1i> 
</ul> 


// 创 建 具 有 ID 的 标签 div#header 


<div id="header"></div> 


// 创 建 具有 class 的 标签 div.header 、div.header.sidebar 


<div class="header"></div> 


<div class="header sidebar"></div> 


以 上 是 HTML 部 分 的 代码 生成 功能 ， 下 面 来 看 下 CSS 的 快速 生成 功能 : 
// 生 成 position: relative pos 


输入 pos 即 可 出 现 position:relative 这 组 CSS 样式， 并且 relative 是 选 定 状态 ， 有 助 于 你 更 
换 属 性 值 。 


但 是 我 们 发 现 使 用 sublime 结合 Emmet 插件 的 CSS 提示 非常 的 灵活 ， 不 会 死板 的 必须 要 输 
入 pos。 下 面 的 输入 都 可 以 得 到 相应 的 值 : 


po = position: relative 


只 要 输入 po 或 者 大 于 po 字母 量 的 值 ， 都 可 以 得 到 position:relative。 当 然 ， 如 果 你 只 是 输入 
p， 那 么 由 于 优先 级 的 考虑 ， 出 现 的 是 padding: | 。 


如 果 你 输入 有 误 ， 它 也 会 自动 纠 错 ， 比 如 下 面 这 个 : 

pod = position: relative 

如 果 你 想 一 开始 得 到 的 是 absolute 这 个 属性 值 ， 那 么 直接 输入 : 
poa = position: absolute; 

当然 ， 上 门 的 标准 写法 是 这 样 的 : 

pos:a = position: absolute; 


如 果 想 输入 背景 的 属性 ， 直 接 使 用 bg 即 可 : 


bg = background: |; 

使 用 bg+ 可 以 展开 背景 属性 的 完整 形式 : bg+ = background: #fff url() 0 0 no-repeat; 
使 用 bg:n 可 以 设置 背景 属性 值 为 none : bg:n = background: none; 

备注 : HTML 和 CSS 其 他 大 部 分 代码 生成 方案 ， 可 以 参考 如 下 网 址 : 


http://docs.emmet.io/cheat-sheet/ 


Bootstrap 教程 


第 1 章 Bootstrap 介绍 


学 习 要 点 : 
1.Bootstrap 概述 
2.Bootstrap 特点 
3.Bootstrap 结构 
4. 创 建 第 一 个 页 面 
5. 学 习 的 各 项 准备 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 了 解 一 下 Boostrap 历史 、 和 特点、 用途， 以 及 为 什么 选择 Boostrap 来 开发 我 
们 的 Web 项 目 。 


一 . **Bootstrap 概述 ** 


Bootstrap 是 由 Twitter 公司 (全 球 最 大 的 微 博 ) 的 两 名 技术 工程 师 研发 的 一 个 基于 HTML Ss 
CSS、JavaScript 的 开源 框架 。 该 框架 代码 简洁 、 视 觉 优 美 ， 可 用 于 快速 、 简 单 地 构建 基于 
PC 及 移动 端 设备 的 Web 页 面 需求 。 


2010 年 6 月 ，Twitter 内 部 的 工程 师 为 了 解决 前 端 开发 任务 中 的 协作 统一 问题 。 经 历 各 种 方案 
后 ，Bootstrap 最 终 被 确定 下 来 ， 并 于 2011 年 8 月 发 布 。 经 过 很 长 时 间 的 迭代 升级 ， 由 最 初 
的 CSS 驱动 项 目 发 展 成 为 内 置 很 多 JavaScript 插件 和 图 标的 多 功能 Web 前 端的 开源 框架 。 


Bootstrap 最 为 重要 的 部 分 就 是 它 的 响应 式 布局 ， 通 过 这 种 布局 可 以 兼容 PC 端 、PAD 以 及 手 
机 移动 端的 页 面 访问 。 


Bootstrap 下 载 及 演示 : 

内 文档 翻译 官网 : http://www.bootcss.com 

鞭 城 Web 俱乐部 官网 : http://www.ycku.com 

二 . xs#Bootstrap 特点 六 

Bootstrap 非常 流行 ， 得 益 于 它 非 常 实用 的 功能 和 特点 。 主 要 核心 功能 特点 如 下 : 
(1). 跨 设备 、 跨 浏览 器 


可 以 兼容 所 有 现代 浏览 器 ， 和 包括 比 较 诉 病 的 IE7、8。 当 然 ， 本 课程 不 再 考虑 |E9 以 下 浏览 


口 吕 


Ey 


0° 


(2). 响 应 式 布局 


不 但 可 以 支持 PC 端的 各 种 分 辨 率 的 显示 ， 还 支持 移动 端 PAD、 手 机 等 屏幕 的 响应 式 切 换 显 
示 。 


(3). 提 供 的 全 面 的 组 件 


Bootstrap 提供 了 实用 性 很 强 的 组 件 ， 包 括 : 导航 、 标 签 、 工 具 条 、 按 钮 等 一 系列 组 件 ， 方 便 
开发 者 调用 。 


(4). 内 置 jQuery 插件 


Bootstrap 提供 了 很 多 实用 性 的 jquery 插件 ， 这 些 插件 方便 开发 者 实现 Web 中 各 种 常规 特 
效 。 


(5). 支 持 HTML5、CSS3 
HTML5 语义 化 标签 和 CSS3 属性 ， 都 得 到 很 好 的 支持 。 
(6). 支 持 LESS 动态 样式 


LESS 使 用 交 量 、 褒 套 、 操 作 混 合 编 码 ， 编 写 更 快 、 更 灵活 的 CSS。 它 和 Bootstrap 能 很 好 
的 配合 开发 。 


三 :六 Bootstrap 结构 ** 


首先 ， 想 要 了 解 Boostrap 的 文档 结构 ， 需 要 在 官网 先 把 它 下 载 到 本 地 。Bootstrap 下 载 地 址 如 
平 过 


Bootstrap 下 载 地 址 : http:/v3.bootcss.com/ (选择 生产 环境 即 可 ，Vv3.3.4) 
解压 后 ， 目 录 呈 现 这 样 的 结构 : 


bootstrap/ 


| 一 css/ 


bootstrap.css 
| p 
bootstrap.css.ma 
p p 
bootstrap.min.css 
| p 
bootstrap-theme.css 
p 
| bootstrap-theme.css.map 
[一 bootstrap-theme.min.css 
| p 
js/ 
| bootstrap.js 
-一 bootstrap.min.js 
p 
[一 fonts/ 
glyphicons-halflings-regular.eot 
yp 9 
glyphicons-halflings-regular.svg 
yp 9 
glyphicons-halflings-regular .ttf 
yp 
glyphicons-halflings-regular .woff 
yp 9 


[一 glyphicons-halflings-regular .woff2 


主要 分 为 三 大 核心 目录 : **css( 样 式 )、js( 脚 本 )、fonts( 字 体 )*。 


1.css 目录 中 有 四 个 css 后 级 的 文件 ， 其 中 包含 min 字样 的 ， 是 压缩 版 本 ， 一 般 使 用 这 个 ; 不 
包含 的 属于 没有 压缩 的 ， 可 以 学 习 J 了解 css 3 的 文件 ; 而 map 后 级 的 文件 则 是 css 二 
射 表 ， 在 一 些 特定 的 浏览 器 工具 中 使 用 。 


2js 目录 包含 两 个 文件 ， 是 未 压缩 和 压缩 的 js 文件。 

3.fonts 目录 包含 了 不 同 后 组 的 字体 文件 。 

四 “' 创建 第 一 个 页 面 

我 们 创建 一 个 HTML5 的 页 面 ， 并且 将 Bootstrap 的 核心 文件 引入 ， 然 后 测试 是 否 正常 显示 。 


// 第 一 个 Bootstrap 


<!IDOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta charset="UTF-8"> 
<title>Bootstrap 介绍 </title> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<body> 
<button class="btn btn-info">Bootstrap</button> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html> 


五 "学习 的 各 项 准备 

1. 开 发 工具 ， 我 们 使 用 Sublime Text3 作 为 Bootstrap 的 开发 工具 ， 并 且 安 装 了 Emmet 代 码 生 
成 插件 ; 

2. 测 试 工具 ， 除 了 常规 的 现代 浏览 器 ， 其 次 就 是 作为 移动 端的 测试 工具 ， 我 们 这 里 采用 的 是 
Opera Mobile Emulator， 和 Chrome 的 移动 Web 测试 工具 。 

3. 所 需 基 础 ， 至 少 有 HTML5 第 一 季 课 程 的 基础 ，Bootstrap 内 置 了 很 多 jQuery 插件 ， 虽 然 使 


用 起 来 比 jQuery 或 JS 本 身 要 简单 的 多 ， 但 如 果 有 jQuery 和 JS 课程 的 基础 ， 那 学 习 理 解 力 
就 更 加 深入 ; 


4. 课 程 分 辨认 : 基础 课程 ， 我 们 使 用 1024 x 768 来 录制 ， 但 某 些 特殊 部 分 ， 比 如 响应 式 和 项 
目 课程 ， 需 要 大 分 辩 浴 录制 ， 会 采用 1440 x 900 来 录制 。 


第 2 章 排版 样式 


学 习 要 点 : 
1. 页 面 排版 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 全 局 CSS 样式 中 的 排版 样式 ， 包 括 了 标题 、 页 面 主体 、 
对 齐 、 列 表 等 常规 内 容 。 


一 . 页 面 排版 
Bootstrap 提供 了 一 些 常 规 设计 好 的 页 面 排版 的 样式 供 开发 者 使 用 。 
1.** 页 面 主体 ** 


Bootstrap 将 全 局 font-size 设置 为 14px，line-height 行 高 设置 为 1.428( 即 20px) ; <p> 上 段落 元 
素 被 设置 等 于 1/2 行 高 ( 即 10px) ; 颜色 被 设置 为 #333 。 


/创建 包含 段落 突出 的 文本 


<p>Bootstrap 框架 </p> 
<p class="lead">Bootstrap 框架 </p> 
<p>Bootstrap 框架 </p> 
<p>Bootstrap 框架 </p> 
<p>Bootstrap 框架 </p> 


2.* 标 题 * 
// 从 h1 到 h6 

<h1>Bootstrap 框架 </h1>//36px <h2>Bootstrap 框架 </h2>//30px <h3>Bootstrap 框架 </h3>//24px < 
= 


我 们 从 Firebug 查看 元 素 了 解 到 ，Bootstrap 分 别 对 h1 ~ h6 进行 了 CSS 样式 的 重 构 ， 并 且 
还 支持 普通 内 联 元 素 定义 class=(.h1 ~ h6) 来 实现 相同 的 功能 。 





// 内 联 元 素 使 用 标题 字体 


<span class="h1">Bootstrap</span> 


注 : 通过 Firebug 查看 元 素 还 看 到 ， 字 体 颜色 、 字 体 样式 、 行 高 均 被 固定 了 ， 从 而 保证 了 统 
一 性 ， 而 原生 的 会 根据 系统 内 置 的 首选 字体 决定 ， 颜 色 是 最 黑色 。 


在 h1~h6 元 素 之 间 ， 还 可 以 获 入 一 个 small 元 素 作为 副标题 ， 


// 在 标题 元 素 内 插入 small 元 素 


<h1>Bootstrap 框架 <small>Bootstrap 小 标题 </small></h1> 
<h2>Bootstrap 框架 <small>Bootstrap 小 标题 </small></h2> 
<h3>Bootstrap 框架 <small>Bootstrap 小 标题 </small></h3> 
<h4>Bootstrap 框架 <small>Bootstrap 小 标题 </small></h4> 
<h5>Bootstrap 框架 <small>Bootstrap 小 标题 </small></h5> 
<h6>Bootstrap 框架 <small>Bootstrap 小 标题 </small></h6> 


通过 Firebug 查看 ， 我 们 发 现 h1 ~ h3 下 small 元 素 的 大 小 只 占 父 元 素 的 65%， 那 么 通过 计 
算 ( 查 看 Firebug 计算 后 的 样式 )，h1~ h3 下 的 small 为 23.4px、19.5px、15.6px ; h4 ~ h6 
下 small 元 素 的 大 小 只 占 父 元 素 的 75% ,分 别 为 : 13.5px、10.5px、9px。 在 h1~h6 下 的 
small 样式 也 进行 了 改变 ， 颜 色 变 成 淡 灰 色 : #777， 行 高 为 1， 粗 度 为 400。 


3. 内 联 文本 元 素 


// 添 加 标记 ，<mark> 元 素 或 .mark 类 


<p>Bootstrap<mark> 框 架 </mark></p> 


// 各 种 加 线条 的 文本 


<del>Bootstrap 框架 </del>// 删 除 的 文本 <s>Bootstrap 框架 </s>// 无 用 的 文本 <ins>Bootstrap 框架 </i| 





// 各 种 强调 的 文本 


<small>Bootstrap 框架 </small>// 标 准 字号 的 85% <strong>Bootstrap 框架 </strong>// 加 粗 700 <em>E 
ee 一 中 


4. 对 齐 





/设置 文本 对 齐 


<p class="text-left">Bootstrap 框架 </p>// 居 左 <p class="text-center">Bootstrap 框架 </p>// 居 
赴 懂 


5. 大 小 写 





// 设 置 英 文 文本 大 小 写 


<p class="text-lowercase">Bootstrap 框架 </p> // 小 写 <p class="text-uppercase">Bootstrap 框 ? 





// 缩 略语 


Bootstrap<abbr title="Bootstrap" class="initialism"> 框 架 </abbr> 


7. 地 址 文本 


// 设 置地 址 ， 去 掉 了 倾斜 ， 设 置 了 行 高 ， 底 部 20px 


<address> 
<strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, 
<abbr title="Phone">P:</abbr> (123) 456-7890 </address> 


-可 








8. 引 用 文本 


/默认 样式 引用 ， 增 加 了 做 边线 ， 设 定 了 字体 大 小 和 内 外 边 距 


<blockquote> Bootstrap 框架 </blockquote> 
// 反 向 

<blockquote class="blockquote-reverse "> Bootstrap 框架 </blockquote> 
9. 列 表 排 版 
// 移 出 默认 样式 


<ul class="list-unstyled"> 
<1i>Bootstrap 框架 </1i> 
<1i>Bootstrap 框架 </1i> 
<li>Bootstrap 框架 </1i> 
<1i>Bootstrap 框架 </1i> 
<1i>Bootstrap 框架 </1i> 
</ul> 


// 设 置 成 内 联 


<ul class="list-inline"> 
<1i>Bootstrap 框架 </1i> 
<li>Bootstrap 框架 </1i> 
<1i>Bootstrap 框架 </1i> 
<li>Bootstrap 框架 </1i> 
<1i>Bootstrap 框架 </1i> 
</ul> 


/水 平 排列 描述 列表 


<dl class="dl-horizontal"> 

<dt>Bootstrap</dt> 

<dd>Bootstrap 提供 了 一 些 常规 设计 好 的 页 面 排版 的 样式 供 开发 者 使 用 。</dd> 
</dl1> 


10. 代 码 


/内 联 代码 


<code>&]lt;section&gt;</code> 


// 用 户 输入 


press <kbd>ctrl + ,</kbd> 
// 代 码 块 


<pre>&lt;p&gt;Please input...&]lt;/p&gt;</pre> 


Bootstrap 还 列举 了 <var> 表 示 标 记 变 量 ，<Ssamp> 表 示 程 序 输出 ， 只 不 过 没有 重新 复写 
CSS 。 


第 3 章 表格 和 按钮 


学 习 要 点 : 
1. 表 格 
2. 按 锂 


主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 表格 和 按钮 功能 ， 通 过 内 置 的 CSS 定义 ， 显 


的 效果 。 

一 :表格 

Bootstrap 提供 了 一 些 丰富 的 表格 样式 供 开 发 者 使 用 。 
1. 基 本 格式 

/实现 基本 的 表格 样式 


<table class="table"> 

注 : 我 们 可 以 通过 Firebug 查看 相应 的 CSS。 

2. 条 纹 状 表格 

/让 <tbody> 里 的 行 产 生 一 行 隔 一 行 加 单 色 背景 效果 
<table class="table table-striped"> 

注 : 表格 效果 需要 基于 基本 格式 .table 


3. 带 边框 的 表格 


// 给 表格 增加 边框 


<table class="table table-bordered"> 


4. 巧 停息 标 


// 让 <tbody> 下 的 表格 巧 停息 标 实现 背景 效果 


<table class="table table-hover"> 


示 各 种 丰富 


5. 状 态 类 


// 可 以 单独 设置 每 一 行 的 背景 样式 


<tr class="success"> 


注 : 一 共 五 种 不 同 的 样式 可 供 选 择 。 
样式 说 明 : 

active 和 鼠标 巧 停 在 行 或 单元 格 上 
Success 标 识 成 功 或 积极 的 动作 

info 标 识 普通 的 提示 信息 或 动作 
warning 标 识 警告 或 需要 用 户 注意 
danger 表 示 危 险 或 潜在 的 带 来 负面 影响 的 动作 
6. 隐 藏 某 一 行 


// 隐 藏 行 


<tr class="sr-only"> 


7. 响 应 式 表 格 


// 表 格 父 元 素 设置 响应 式 ， 小 于 768px 出 现 边框 


<body class="table-responsive"> 


二 按钮 
Bootstrap 提供 了 很 多 丰富 按钮 供 开发 者 使 用 。 
1. 可 作为 按钮 使 用 的 标签 或 元 素 


// 转 化 成 普通 按钮 


<a href="###" class="btn btn-default">Link</a> 
<button class="btn btn-default">Button</button> 
<input type="button" class="btn btn-default" value="input"> 


注意 事项 有 三 点 : 


(1). 针 对 组 件 的 注意 事项 


虽然 按钮 类 可 以 应 用 到 <a> 和 <button> 元 素 上 ， 人 但是， 导航 和 导航 条 组 件 只 支持 <button> 


(2). 链 接 被 作为 按钮 使 用 时 的 注意 事项 


如 果 <a> 元 素 被 作为 按钮 使 用 -- 并 用 于 在 当前 页 面 触发 某 些 功能 -- 而 不 是 用 于 链接 其 他 页 面 
或 链接 当前 页 面 中 的 其 他 部 分 ， 那 么 ， 务 必 为 其 设置 role="button" 属性 。 


(3). 跨 浏览 器 展现 


我 们 总 结 的 最 佳 实践 是 : 强烈 建议 尽 可 能 使 用 <button> 元 素来 获得 在 各 个 浏览 器 上 获得 相 匹 
配 的 绘制 效果 。 


另外 ， 我 们 还 发 现 了 Firefox <30 版 本 的 浏览 器 上 出 现 的 一 个 bug， 其 表现 是 : 阻止 我 们 为 基 
于 <input> 元 素 所 创建 的 按钮 设置 line-height 属性 ， 这 就 导致 在 


Firefox 浏览 器 上 不 能 完全 和 其 他 按钮 保持 一 致 的 高 度 。 
2. 预 定义 样式 
// 一 般 信 息 


<button class="btn btn-info">Button</button> 


样式 说 明 
btn-default 默 认 样 式 
btn-success 成 功 样式 
btn-info 一 般 信息 样式 
btn-warning 警 告 样式 
btn-danger 危 险 样式 
btn-primary 首 选项 样式 
btn-link 链 接 样式 

3. 尺 寸 大 小 


/从 大 到 小 的 尺寸 


<button class="btn btn-1g">Button</button> 
<button class="btn">Button</button> 

<button class="btn btn-sm">Button</button> 
<button class="btn btn-xs">Button</button> 


4. 块 级 按钮 


// 块 级 换行 


<button class="btn btn-block">Button</button> 
<button class="btn btn-block">Button</button> 


5. 激 活 状 态 


// 激 活 按钮 


<button class="btn active">Button</button> 


6. 茶 用 状态 


// 禁 用 按钮 


<button class="btn active disabled">Button</button> 


第 4 齐 表 单 和 图 片 


学 习 要 点 : 

1. 表 单 

2. 图 片 

主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 表单 和 图 片 功 能 ， 通 过 内 置 的 CSS 定义 ， 显 示 各 种 丰富 
的 效果 。 


eh 
Bootstrap 提供 了 一 些 丰 富 的 表单 样式 供 开发 者 使 用 。 
1. 基 本 格式 

/实现 基本 的 表单 样式 


<form> 
<div class="form-group"> 
<label> 电 子 邮件 </label> 
<input type="email" class="form-control" placeholder=" 请 输入 您 的 电子 邮件 "> 


</div> 
<div class="form-group"> 
<label> 密 码 </label> 
<input type="password" class="form-control" placeholder=" 请 输入 您 的 密码 "> 
</div> 
</form> 


注 : 只 有 正确 设置 了 输入 框 的 type 类 型 ， 才 能 被 赋予 正确 的 样式 。 支 持 的 输入 框 控件 包括 : 
text、password、datetime 、datetime-local、 date、month 、time 、week 、number、email、 
url、search、tel 和 color 。 


2. 内 联 表 单 
// 让 表单 左 对 齐 浮动 ， 并 表现 为 inline-block 内 联 块 结构 


<form class="form-inline"> 
注 : 当 小 于 768px， 会 恢复 独占 样式 


3. 表 单 合 组 


/前 后 增加 片段 


<div class="input-group"> 
<div class="input-group-addon"> 半 </div> 
<input type="text" class="form-control"> 
<div class="input-group-addon">.00</div> 
</div> 


4. 水 平 排列 
// 让 表单 内 的 元 素 保 持 水 平 排列 


<form class="form-horizontal"> 
<div class="form-group"> 
<label] class="col-sm-2 control-label"> 电 子 邮 件 </label> 
<div class="col-sm-10"> 
<input type="email" class="form-control" placeholder=" 请 输入 您 的 电子 邮件 "> 
</div> 
</div> 
</form> 


注 : 这 里 用 到 了 col-sm 机 格 系统 ， 后 面 章节 会 重点 讲解 ， 而 control-label 表示 和 父 元 素 样式 


<div class="checkbox"> 

<label> <input type="checkbox"> 体 育 </label> 
</div> 
<div class="checkbox"> 

<label> <input type="checkbox"> 音 乐 </label> 
</div> 


<div class="checkbox disabled"> 
<label> <input type="checkbox" disabled> 音 乐 </label> 
</div> 


// 设 置 内 联 一 行 显示 的 复 选 杠 


<label class="checkbox-inline"> <input type="checkbox"> 体 育 </label> 
<label class="checkbox-inline disabled"> <input type="checkbox" disabled> 音 乐 </label> 


// 设 置 单 选 框 


<div class="radio disabled"> 
<label> <input type="radio" name="sex" disabled> 男 </label> 
</div> 


6. 下 拉 列 表 


/设置 下 拉 列 表 


<select class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 


7. 校 验 状 态 
// 设 置 为 错误 状态 


<div class="form-group has-error"> 


注 : 还 有 其 他 状态 如 下 : 
样式 说 明 

has-error 错 误 状 态 
has-success 成 功 状 态 
has-warning 警 告状 态 


//label 标签 同步 相应 状态 


<label] class="control-label">Input with success</label> 


8. 添 加 额外 的 图 标 


// 文 本 框 右 侧 内 置 文本 图 标 


<div class="form-group has-feedback"> 

<label> 电 子 邮 件 </label> 

<input type="email" class="form-control"> 

<span class="glyphicon glyphicon-ok form-control-feedback"></span> 
</div> 


注 : 除了 glyphicon-ok 外 ， 还 有 几 个 如 下 表 : 
样式 说 明 

glyphicon-ok 成 功 状 态 
glyphicon-warning-sign 警 告状 态 
glyphicon-remove 错 误 状 态 


9. 控 制 尺寸 


/从 大 到 人 小 


<input type="password" class="form-control input-1lg"> 
<input type="password" class="form-control"> 
<input type="password" class="form-control input-sm"> 


注 : 也 可 以 设置 父 元 素 form-group-lg、form-group-sm， 来 调整 。 
二 图片 

Bootstrap 提供 了 一 些 丰 富 的 图 片 样式 供 开发 者 使 用 。 

1. 图 片 形状 


// 三 种 形状 


<img src="img/pic.png" alt=" 图 片 " class="img-rounded"> 
<img src="img/pic.png" alt=" 图 片 " class="img-circle"> 
<img src="img/pic.png" alt=" 图 片 " class="img-thumbnail"> 





// 响 应 式 图 片 


<img src="img/pic.png" alt=" 图 片 " class="img-responsive"> 


5 齐 栅 格 系统 


学 习 要 点 : 

1. 移 动 设 备 优先 
2. 布 局 容器 

3. 栅 格 系统 

主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 栅 格 系统 ， 提 供 了 一 套 响 应 式 、 移 动 设备 优先 的 流 式 栅 
格 系统 。 


一 . 移动 设备 优先 


在 HTML5 的 项 目 中 ， 我 们 做 了 移动 端的 项 目 。 它 有 一 份 非常 重要 的 meta， 用 于 设置 屏幕 和 
设备 等 宽 以 及 是 否 运 行 用 户 缩放 ， 及 缩放 比例 的 问题 。 


分 别 为 : 屏幕 宽度 和 设备 一 致 、 初 始 缩放 上 比例、 最 大 缩放 比例 和 禁止 用 户 缩放 
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, User- 
二 布局 容器 





Boolstrap 需要 为 页 面 内 容 和 栅 格 系统 包 庄 一 个 .container 容器 。 由 于 padding 等 属性 的 原 


因 ， 这 两 种 容器 类 不 能 相互 诅 套 。 
// 固 定 宽度 

<div class="container"> ... </div> 
/1/100% 宽 度 

<div class="container-fluid"> ... </div> 


栅 格 系统 中 ， 浏 览 器 会 随 着 屏幕 的 大 小 的 增 减 自动 分 配 最 多 12 列 。 通过 一 系列 的 行 (row) 与 
列 (column) 的 组 合 来 创建 页 面 布 局 。 工 作 原 理 如 下 


1.“ 行 (row) ”必须 包含 在 .container (固定 宽度 ) 或 .container-fluid (100% 宽 度 ) 中 ， 以 
便 为 其 赋予 合适 的 排列 (aligment) 和 内 补 (padding) 。 


2. 通 过 “ 行 (row) "在 水 平方 向 创建 一 组 “ 列 (column)”。 


3. 你 的 内 容 应 当 放置 于 “ 列 (column) "内 ， 并 且 ， 只 有 “ 列 (column) "可 以 作为 行 (row) ?的 
直接 子 元 素 。 


4. 类 似 .row 和 .col-xs-4 这 种 预定 义 的 类 ， 可 以 用 来 快速 创建 栅 格 布局 。 
Bootstrap 源码 中 定义 的 mixin 也 可 以 用 来 创建 语义 化 的 布局 。 


5. 通 过 为 “ 列 (column) ”设置 padding 属性 ， 从 而 创建 列 与 列 之 间 的 间隔 (gutter) 。 通 
过 为 .row 元 素 设置 负 值 margin 从 而 抵消 掉 为 .container 元 素 设置 的 padding， 也 就 间接 
为 “ 行 (row) "所 包含 的 “ 列 (column) "抵消 掉 了 padding 。 


6. 负 值 的 margin 就 是 下 面 的 示例 为 什么 是 向 外 突出 的 原因 。 在 栅 格 列 中 的 内 容 排 成 一 行 。 


7. 栅 格 系统 中 的 列 是 通过 指定 1 到 12 的 值 来 表示 其 跨越 的 范围 。 例 如 ， 三 个 等 宽 的 列 可 以 使 
用 三 个 .col-xs-4 来 创建 。 

8. 如 果 一 “ 行 (row) "中 包含 了 的 “ 列 (column) ”大 于 12， 多 余 的 “ 列 (column) "所 在 的 元 素 
将 被 作为 一 个 整体 另 起 一 行 排列 。 

9. 栅 格 类 适用 于 与 屏幕 宽度 大 于 或 等 于 分 界 点 大 小 的 设备 ， 并 且 针 对 小 屏幕 设备 惰 盖 栅 格 
类 。 因此， 在 元 素 上 应 用 任何 .col-md- 栅 格 类 适用 于 与 屏幕 宽度 大 于 或 等 于 分 界 点 大 小 的 设 


备 ， 并 且 针 对 小 屏幕 设备 覆盖 栅 格 类 。 因 此 ， 在 元 素 上 应 用 任何 .col-/g- 不 存在 ， 也 影响 大 
屏幕 设备 。 


/创建 一 个 响应 式 行 


<div class="container"> 
<div class="row"> ... </div> 
</div> 


// 创 建 最 多 12 列 的 响应 式 行 


<div class="container"> 
<div class="row"> 


<div class="col-md-1 a">1</div> 
<div class="col-md-1 a">2</div> 
<div class="col-md-1 a">3</div> 
<div class="col-md-1 a">4</div> 
<div class="col-md-1 a">5</div> 
<div class="col-md-1 a">6</div> 
<div class="col-md-1 a">7</div> 
<div class="col-md-1 a">8</div> 
<div class="col-md-1 a">9</div> 
<div class="col-md-1 a">10</div> 
<div class="col-md-1 a">11</div> 
<div class="col-md-1 a">12</div> 
</div> 
</div> 


// 为 了 显示 明显 的 CSS 


.a { height: 100px; background-color: 
} 


#eee; border: 1px solid #ccc; 


// 总 列 数 都 是 12， 每 列 分 配 多 列 


<div class="container"> 
<div class="row"> 
<div class="col-md-4 
<div class="col-md-4 
<div class="col-md-4 
</div> 
<div class="row"> 
<div class="col-md-8 
<div class="col-md-4 
</div> 
</div> 


a">1-4</div> 
a">5-8</div> 
a">9-12</div> 


a">1-8</div> 
a">9-12</div> 


栅 格 参数 表 


经 
5 


如 上 图 所 示 ， 栅 格 系统 最 外 层 区 分 了 四 种 宽度 的 浏览 器 : 超 小 屏 (<768px)、 小 屏 (>=768px)、 
中 屏 (>=992px) 和 大 屏 (>=1200px)。 而 内 层 .container 容器 的 自 适应 宽度 为 : 自动 、750px、 


970px 和 1170px。 自 动 的 意思 为 ， 如 果 你 是 手机 屏幕 ， 则 全 面 独占 一 行 显示 。 


// 四 种 屏幕 分 类 全 部 激活 


<div class="container"> 
<div class="row"> 


<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div Class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 a">4</div> 
</div> 


</div> 


// 有 时 我 们 可 以 设置 列 偏 移 ， 让 中 间 保 持 空 陵 


<div class="container"> 
<div class="row"> 

<div class="col-md-8 a">8</div> 

<div class="col-md-3 col-md-offset-1 a">3</div> 


</div> 
</div> 


// 也 可 以 诅 套 ， 贬 满 也 是 12 列 


<div class="container"> 
<div class="row"> 
<div class="col-md-9 a"> 
<div class="col-md-8 a">1-8</div> 
<div class="col-md-4 a">9-12</div> 
</div> 
<div class="col-md-3 a"> 11-12 </div> 
</div> 
</div> 


// 可 以 把 两 个 列 交 换 位 置 ，push 向 左 移动 ，pull 向 右 移动 


<div class="container"> 
<div class="row"> 
<div class="col-md-9 col-md-push-3 a">9</div> 
<div class="col-md-3 col-md-pull-9 a">3</div> 
</div> 
</div> 


第 6 章 辅 组 类 和 响应 式 工具 


学 习 要 点 : 

1. 辅 组 类 

2. 响 应 式 工 具 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 辅 组 类 和 响应 式 工具 ， 辅助 类 提供 了 一 组 类 来 辅 组 页 
面 设 计 ， 而 响应 式 工具 则 利用 媒体 查询 显示 或 隐藏 菜 些 内 容 。 


一 ， 辅助 类 


Bootstrap 在 布局 方面 提供 了 一 些 细小 的 辅 组 样式 ， 用 于 文字 颜色 以 及 背景 色 的 设置 、 显 示 关 
闭 图 标 等 等 。 


1. 情 景 文本 顾 色 


样式 列表 

样式 名 描述 
text-muted 柔和 灰 
text-primary ”主要 蓝 
text-success 成 功 绿 
text-info ”信息 蓝 
text-warning ”警告 黄 
text-danger ”危险 红 


// 各 种 色调 的 字体 


<p class="text-muted">Bootstrap 视频 教程 </p> 
<p class="text-primary">Bootstrap 视频 教程 </p> 
<p class="text-success">Bootstrap 视频 教程 </p> 
<p class="text-info">Bootstrap 视频 教程 </p> 
<p class="text-warning">Bootstrap 视频 教程 </p> 
<p class="text-danger">Bootstrap 视频 教程 </p> 


样式 列表 
样式 名 描述 
bg-primary ”主要 蓝 
bg-success 成 功 绿 
bg-info ”信息 蓝 
bg-warning ”警告 黄 
bg-danger ”危险 红 


// 各 种 色调 的 背景 


<p class="bg-primary">Bootstrap 视频 教程 </p> 
<p class="bg-success">Bootstrap 视频 教程 </p> 
<p class="bg-info">Bootstrap 视频 教程 </p> 

<p class="bg-warning">Bootstrap 视频 教程 </p> 
<p class="bg-danger">Bootstrap 视频 教程 </p> 


3. 关 闭 按钮 


<button type="button" class="close">&times;</button> 


<span class="caret"></span> 


5. 快 速 浮动 


<div class="pull-left"> 左 边 </div> 
<div class="pull-right"> 右 边 </div> 


注 : 这 个 浮动 其 实 就 是 float， 只 不 过 使 用 了 limportant 加 强 了 优先 级 。 


6. 块 级 居中 

<div class="center-block"> 居 中 </div> 

注 : 就 是 margin:x auto ; 并 且 设 置 了 display:block;。 
7. 清 理 浮动 

<div class="clearfix"></div> 

注 : 这 个 div 可 以 放 在 需要 清理 浮动 区 块 的 前 面 即 可 。 
8. 显 示 和 隐藏 


<div class="show">show</div> 
<div class="hidden">hidden</div> 


二 响应 式 工具 


在 媒体 查询 时 ， 针 对 不 同 的 屏幕 大 小 ， 有 时 需要 显示 和 隐藏 部 分 内 容 。 响 应 式 工具 类 ， 就 提 
供 了 这 种 解决 方案 。 


超 小 展区 小 展区 中 等 屏幕 
.visible-xs-* 可 见 
.visible-sm-* 可 见 
.visible-md-* 可 见 
.visible-lg-* 
.hidden-xs 可 见 可 见 
.hidden-sm 可 见 可 见 
.hidden-md 可 见 可 见 
.hidden-1lg 可 见 可 见 可 见 


// 超 小 屏幕 激活 显示 


<div class="visible-xs-block a">Bootstrap</div> 


// 超 小 屏幕 激活 隐藏 


<div class="hidden-xs a">Bootstrap</div> 


注 : 对 于 显示 的 内 容 ， 有 三 种 变 体 ， 分 别 为 : block、inline-block 、inline 。 
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第 7 章 图 标 菜 单 按 钮 组 件 


学 习 要 点 : 

1. 小 图 标 组 件 

2. 下 拉 菜 单 组 件 
3. 按 钮 组 组 件 
4. 按 钮 式 下 拉 菜 六 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 三 个 组 件 功能 : 小 图 标 组 件 、 下 拉 菜 单 组 件 和 各 种 按钮 
组 件 。 


一 :小 图 标 组 件 


Bootstrap 提供 了 免费 的 263 个 小 图 标 ( 数 了 两 次 ) ， 具 体 可 以 参考 中 文官 网 的 组 件 链接 : 
http://v3.bootcss.com/components/#glyphicons ° 


部 分 图 标 如 下 : 
glyphicon glyphicon glyphicon glyphicon 
glyphicon-heart glyphicon-star glyphicon-star- glyphicon-user 
empty 
glyphicon glyphicon glyphicon glyphicon 
glyphicon-ok glyphicon- glyphicon- glyphicon- 
remove zoom-in zoom-out 
会 蕉 ©O A 

glyphicon glyphicon glyphicon glyphicon 


glyphicon-home glyphicon-file glyphicon-time glyphicon-road 


可 以 使 用 <i> 或 <span> 标 签 来 配合 使 用 ， 具 体 如 下 : 


// 使 用 小 图 标 


<i class="glyphicon glyphicon-star"></i> 
<span class="glyphicon glyphicon-star"></span> 


// 也 可 以 结合 按钮 


<button class="btn btn-default btn-1g"> 

<span class="glyphicon glyphicon-star"></span> 
</button> 
<button class="btn btn-default btn"> 

<span class="glyphicon glyphicon-star"></span> 
</button> 
<button class="btn btn-default btn-sm"> 

<span class="glyphicon glyphicon-star"></span> 
</button> 
<button class="btn btn-default btn-xs"> 

<span class="glyphicon glyphicon-star"></span> 
</button> 


二 :下拉 菜单 组 件 
下 拉 菜 单 ， 就 是 点 击 一 个 元 素 或 按钮 ， 触 发 隐藏 的 列表 显示 出 来 。 
// 基 本 格式 


<div class="dropdown"> 
<button class="btn btn-default" data-toggle="dropdown"> 下 拉 菜 单 <span class="caret"><. 


</button> 
<ul class="dropdown-menu"> 
<]1i> 
<a href="#"> 首 页 </a> 
</1i> 
<1i> 
<a href="#"> 资 讯 </a> 
</1i> 
<]1i> 
<a href="#"> 产 品 </a> 
</1i> 
<1i> 
<a href="#"> 关 于 </a> 
</1i> 
</ul> 
</div> 


DrYYYYFrYF AD 折 D 人 拉 rr 


按钮 和 菜单 需要 包 衰 在 .dropdown 的 容器 里 ， 而 作为 被 点 击 的 元 素 按钮 需要 设置 data- 
toggle="dropdown" 才 能 有 效 。 对 于 菜单 部 分 ， 设 置 class="dropdown-menu" 才 能 自动 隐藏 并 
添加 固定 样式 。 设 置 class="caret" 表 示 箭 头 ， 可 上 可 下 。 





// 设 置 向 上 触发 


<div class="dropup"> 


// 菜 单项 居 右 对 齐 ， 默 认 值 是 dropdown-menu-left 


<ul class="dropdown-menu dropdown-menu-right"> 


// 设 置 菜单 的 标题 ， 不 要 加 超 链接 


<1i class="dropdown-header"> 网 站 导航 </1i> 


<li class="divider"></1i> 


1/ 设 置 菜单 的 禁用 项 


<11 class="disabled"><a href="#"> 产 品 </a></1i> 


// 让 菜单 默认 显示 


<div class="dropdown open"> 


三 .按钮 组 组 件 


按钮 组 就 是 多 个 按钮 集成 在 一 个 


1/ 基本 格式 


<div class="btn-group"> 


me BE 


合 胡 


里 形成 独 有 的 效果 。 


<button type="button" class="btn btn-default"> 左 </button> 
<button type="button" class="btn btn-default"> 中 </button> 
<button type="button" class="btn btn-default"> 右 </button> 


</div> 


// 将 多 个 按钮 组 整合 起 来 便于 管理 


<div class="btn-toolbar"> 
<div class="btn-group"> 
<button type="button" 
<button type="button" 
<button type="button" 
</div> 


<div class="btn-group"> 
<button type="button" 
<button type="button" 
<button type="button" 
</div> 
</div> 


// 设 置 按钮 组 大 小 


class="btn 
class="btn 
class="btn 


class="btn 
class="btn 
class="btn 


btn-default"> 
btn-default"> 
btn-default"> 


btn-default"> 
btn-default"> 
btn-default"> 


左 </button> 
中 </button> 
右 </button> 


1 </button> 
2 </button> 
3 </button> 


<div class="btn-group btn-group-1g"> 
<div class="btn-group> 

<div class="btn-group btn-group-sm"> 
<div class="btn-group btn-group-xs"> 


// 吝 套 一 个 分 组 ， 比 如 下 拉 菜 六 


<div class="btn-group"> 
<button type="button" class="btn btn-default"> 左 </button> 
<button type="button" class="btn btn-default"> 中 </button> 
<button type="button" class="btn btn-default"> 右 </button> 
<div class="btn-group"> 
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下 拉 菜 单 < 
</button> 


<ul class="dropdown-menu"> 


<1i> 
<a href="#"> 首 页 </a> 
</1i> 
< 
<a href="#"> 资 讯 </a> 
</1i> 
< > 
<a href="#"> 产 品 </a> 
</1i> 
< > 
<a href="#"> 关 于 </a> 
</1i> 
</ul> 
</div> 
</div> 


= 





注意 : 这 里 <div> 中 并 没有 实现 class="dropdown"， 通 过 源码 分 析 知 道 谋 套 本 身 已 经 有 定位 就 
不 需要 再 设置 。 而 右边 的 圆 角 只 要 多 加 一 个 class="dropdown-toggle" 即 可 。 


// 设 置 按钮 组 重 直 排列 


<div class="btn-group-vertical"> 


// 设 置 两 端 对 齐 按钮 组 ， 使 用 <a> 标 签 


<div class="btn-group-justified"> 
<a type="button" class="btn btn-default"> 左 </a> 
<a type="button" class="btn btn-default"> 中 </a> 
<a type="button" class="btn btn-default"> 右 </a> 
</div> 


// 如 果 需 要 使 用 <button> 标 签 ， 则 需要 对 每 个 按钮 进行 群 组 


<div class="btn-group-justified"> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"> 左 </button> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"> 中 </button> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"> 右 </button> 
</div> 
</div> 


四 . 按钮 式 下 拉 菜 


这 个 下 拉 菜 单 其 实 和 第 二 个 知识 点 一 样 ， 只 不 过 ， 这 个 是 在 群 组 里 ， 不 需要 <div> 声 明 
class="dropdown"。° 


// 群 组 按钮 下 拉 菜 六 


<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown"> 


</button> 
<ul class="dropdown-menu"> 
<]1i> 
<a href="#"> 首 页 </a> 
</1i> 
<]1i> 
<a href="#"> 资 讯 </a> 
</1i> 
<]1i> 
<a href="#"> 产 品 </a> 
</1i> 
<]1i> 
<a href="#"> 关 于 </a> 
</1i> 
</Uul> 
</div> 


i 
1/ 分裂 式 按钮 下 拉 菜 单 





<div class="btn-group"> 
<button type="button" class="btn btn-default"> 下 拉 菜 单 </button> 
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown"> 
<span class="caret"></span> 


</button> 
<ul class="dropdown-menu"> 
<]1i> 
<a href="#"> 首 页 </a> 
</1i> 
<]1i> 
<a href="#"> 资 讯 </a> 
</1i> 
<]1i> 
<a href="#"> 产 品 </a> 
</1i> 
<]1i> 
<a href="#"> 关 于 </a> 
</1i> 
</ul> 
</div> 


了 一 一 佣 ' 
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/向 上 弹出 式 


<div class="btn-group dropup"> 
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第 8 章 输 入 框 和 寻 航 组 件 


学 习 要 点 : 

1. 输 入 框 组 件 

2. 导 航 组 件 

3. 导 航 条 组 件 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 两 个 个 组 件 功 能 : 输入 框 组 件 和 导航 导航 条 组 件 。 
一 . 输入 框 组 件 

文本 输入 框 就 是 可 以 在 <input> 元 素 前 后 加 上 文字 或 按钮 ， 可 以 实现 对 表单 控件 的 扩展 。 


// 在 左 侧 添加 文字 


<div class="input-group"> 
<span class="input-group-addon">@</span> 
<input type="text" class="form-control"> 
</div> 


// 在 右 侧 添 加 文字 


<div class="input-group"> 

<input type="text" class="form-control"> 

<Span class="input-group-addon">@163.com</span> 
</div> 


// 在 两 侧 添 加 文字 


<div class="input-group"> 
<span class="input-group-addon">$</span> 
<input type="text" class="form-control"> 
<span class="input-group-addon">.00</span> 
</div> 


// 设 置 尺 寸 ， 另 外 三 种 分 别 是 默认 、Xxs、sm 


<div class="input-group input-group-1lg"> 


左 侧 使 用 复 选 框 和 单 选 杠 


<div class="input-group"> 
<span class="input-group-addon"> 
<input type="checkbox"> 
</span> 
<input type="text" class="form-control"> 
</div> 


<div class="input-group"> 
<span class="input-group-addon"> 
<input type="radio"> 
</span> 
<input type="text" class="form-control"> 
</div> 


// 堪 侧 使 用 按钮 


<div class="input-group"> 
<span class="input-group-btn"> 
<button type="button" class="btn btn-default"> 按钮 </button> </span> 
<input type="text" class="form-control"> 
</div> 


// 左 侧 使 用 下 拉 菜 单 或 分 列 式 


<div class="input-group"> 
<span class="input-group-btn"> 
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下 拉 菜 单 < 
</button> 
<ul class="dropdown-menu"> 
<]i class="dropdown-header"> 网 站 导航 </1i> 


< > 

<a href="#"> 首 页 </a> 
</1i> 
< 全 

<a href="#" > 资讯 </a> 
</1i> 


<]li class="divider"> 
<a href="#"> 产 品 </a> 

</1i> 

<]li class="disabled"> 
<a href="#"> 关 于 </a> 

</1i> 

</ul> </span> 
<input type="text" class="form-control"> 
</div> 


| 
二 .导航 组 件 





Bootstrap 提供 了 一 组 导航 组 件 ， 用 于 实现 Web 页 面 的 栏目 操作 。 


// 基 本 导航 标签 页 


<ul class="nav nav-tabs"> 
<li class="active"> 
<a href="#"> 首 页 </a> 
</1i> 
<]i> 
<a href="#"> 资 讯 </a> 
</1i> 
<]i> 
<a href="#"> 产 品 </a> 
</1i> 
<]i> 
<a href="#"> 关 于 </a> 
</1i> 
</ul> 


// 胶 赛 式 导航 


<ul class="nav nav-pills"> 


// 重 直 胶 党 式 导 航 


<ul class="nav nav-pills nav-stacked"> 


// 导 航 两 端 对 齐 


<ul class="nav nav-tabs nav-justified"> 


// 禁 用 导航 中 的 项 目 


<11 class="disabled"><a href="#"> 关 于 </a></1i> 


// 带 下 拉 菜 单 的 导航 


<ul class="nav nav-tabs"> 

<li class="active"> 
<a href="#"> 首 页 </a> 

</1i> 

<]1i> 
<a href="#"> 资 讯 </a> 

</1i> 

<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下 拉 菜 单 <span class=" 
<ul class="dropdown-menu"> 


<1i> 
<a href="#"> 菜 单一 </a> 
</1i> 
<1i> 
<a href="#"> 菜 单 二 </a> 
</1i> 
</ul> 


</1i> 
</ul> 


“| sa 








三 .导航 条 组 件 


导航 条 是 网 站 中 作为 导航 页 头 的 响应 式 基 础 组 件 。 


// 基 本 格式 

<nav class="navbar navbar-default"> ... </nav> 
// 反 色调 导航 

<nav class="navbar navbar-inverse"> ... </nav> 


// 基 本 导航 条 ， 和 包含 标 题 和 列表 


<nav class="navbar navbar-default"> 
<div class="container"> 
<div class="navbar-header"> 
<a href="#" class="navbar-brand"> 标 题 </a> 
</div> 
<ul class="nav navbar-nav"> 
<11 class="active"> 
<a href="#"> 首 页 </a> 
</1i> 
<1i> 
<a href="#"> 资 讯 </a> 
</1i> 
<11 class="disabled"> 
<a href="#"> 产 品 </a> 


</1i> 
<1i> 
<a href="#"> 关 于 </a> 
</1i> 
</ul> 
</div> 
</nav> 


// 导 航 条 中 使 用 表单 


<form action="" class="navbar-form navbar-left"> 
<div class="input-group"> 
<input type="text" class="form-control"> 
<span class="input-group-btn"> 
<button type="submit" class="btn btn-default"> 提交 </button> 
</span> 
</div> 
</form> 


// 导 航 中 使 用 按钮 


<button class="btn btn-default navbar-btn"> 按 钮 </button> 


// 导 航 中 使 用 对 齐 方式 ，left 和 right 


<button class="btn btn-default navbar-btn navbar-right"> 按 钮 </button> 


// 导 航 中 使 用 一 段 文本 


<p class="navbar-text"> 我 是 一 段 文本 </p> 


// 非 导航 链接 ， 一 般 需 要 置 入 文本 区 域内 


<a href="#" class="navbar-1link"> 非 导航 链接 </a> 


// 将 导航 固定 在 顶部 ， 下 面 的 内 容 会 自动 上 移 


<nav class="navbar navbar-default navbar-fixed-top"> 


// 将 导航 补丁 在 底部 


<nav class="navbar navbar-default navbar-fixed-bottom"> 


/| 静态 导 航 ， 和 页 面 等 宽 的 导航 条 ， 去 掉 了 圆 角 


<nav class="navbar navbar-default navbar-static-top"> 


学 习 要 点 : 
1. 路 径 组 件 


2. 分 页 组 件 





4. 徽 章 组 件 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 四 个 组 件 功能 : 路 径 组 件 、 分 页 组 件 、 标 签 组 件 和 徽章 
组 件 。 


一 :路 径 组 件 


路 径 组 件 也 叫做 面包 届 导 航 。 


// 面 包 届 导航 
<ol class="breadcrumb"> 
<]i> 
<a href="#"> 首 页 </a> 
</1i> 
<]i> 
<a href="#"> 产 品 列表 </a> 
</1i> 
<1i class="active"> 韩版 2015 年 羊绒 毛衣 </1i> 
</O1> 


分 页 组 件 可 以 提供 带 有 展示 页 面 的 功能 。 


// 默 认 分 页 


<ul class="pagination"> 

<]i> 

<a href="#">&laquo;</a> 
</1i> 
<]i> 

<a href="#">1</a> 
</1i> 
<]i> 

<a href="#">2</a> 
</1i> 
<]i> 

<a href="#">3</a> 
</1i> 
<]i> 

<a href="#">4</a> 
</1i> 
<]i> 

<a href="#">5</a> 
</1i> 
<]i> 

<a href="#">&raquo;</a> 
</1i> 

</ul> 


// 首 选项 和 禁用 


<li class="active"><a href="#">1</a></1i> 
<li class="disabled"><a href="#">2</a></1i> 


// 设 置 尺寸 ， 四 种 lg、 默认 、sm 和 xs 


<ul class="pagination pagination-]1g"> 


<ul class="pager"> 


<]1i> 
<a href="#"> 上 一 页 </a> 
</1i> 
<]i> 
<a href="#"> 下 一 页 </a> 
</1i> 
</ul> 
// 对 齐 翻 页 链接 


<ul class="pager"> 
<li class="previous"> 
<a href="#"> 上 一 页 </a> 
</1i> 
<]li class="next"> 
<a href="#"> 下 一 页 </a> 
</1i> 
</ul> 


<1i class="previous disabled"><a href="#"> 上 一 页 </a></1i> 


三 .标签 
// 在 文本 后 面 带 上 标签 


<h3> 标 签 <span class="label label-default">new</span></h3> 


/不 同色 调 的 标签 


<h3> 标 签 <span class="label label-primary">new</span></h3> 
<h3> 标 签 <span class="label label-success">new</span></h3> 
<h3> 标 签 <span class="label label-info">new</span></h3> 

<h3> 标 签 <span class="label label-warning">new</span></h3> 
<h3> 标 签 <span class="label label-danger">new</span></h3> 


四 .徽章 


// 未 读 信 息 数量 徽章 


<a href="#"> 信 息 <span class="badge">10</span></a> 


// 按 钮 中 使 用 徽章 


<button class="btn btn-success"> 提交 <span class="badge">3</span> 
</button> 


// 激 活 状 态 自动 适 配 色调 


<ul class="nav nav-pills"> 
<l1i class="active"> 
<a href="#"> 首 页 <span class="badge">2</span></a> 
</1i> 
<]1i> 
<a href="#"> 资 讯 </a> 
</1i> 
</ul> 


第 10 章 巨 幕 页 头 缩 略 图 和 警告 框 组 件 


学 习 要 点 : 
1. 巨 幕 组 件 
2. 页 头 组 件 

3. 缩 略图 组 件 
4. 警 告 框 组 件 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 四 个 组 件 功能 : 巨 幕 组 件 、 页 头 组件 、 缩 略图 组 件 和 警 
告 框 组 件 。 


一 . 巨 幕 组 件 
巨 幕 组 件 主要 是 展示 网 站 的 关键 性 区 域 。 


// 在 国定 的 范围 内 ， 有 圆 角 


<div class="container"> 
<div class="jumbotron"> 


<h2> 网 站 标题 </h2> 
<p> 这 是 一 个 学 习性 的 网 站 ! </p> 
<p> 
<a href="#" class="btn btn-default"> 更 多 内 容 </a> 
</p> 
</div> 


</div> 


/1/100% 全 屏 ， 没 有 圆 角 


<div class="jumbotron"> 
<div class="container"> 


<h2> 网 站 标题 </h2> 
<p> 这 是 一 个 学 习性 的 网 站 ! </p> 
<p> 
<a href="#" class="btn btn-default"> 更 多 内 容 </a> 
</p> 
</div> 


</div> 


<div class="page-header"> 
<h1> 大 标题 <small> 小 标题 </small></h1> 
</div> 


三 . 缩 略 图 组 件 


// 缩 略图 配合 响应 式 


<div class="container"> 
<div class="row"> 
<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
</div> 
</div> 
<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
</div> 
</div> 
<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
</div> 
</div> 
<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
</div> 
</div> 
</div> 
</div> 


// 自 定义 内 容 


<div class="container"> 
<div class="row"> 
<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
<div class="caption"> 


<h3> 图 文 并 诚 </h3> 
<p> 这 是 一 个 图 片 结合 文字 的 缩 略图 </p> 
<p> 
<a href="#" class="btn btn-default"> 进 入 </a> 

</p> 

</div> 

</div> 
</div> 


<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
<div class="caption"> 


<h3> 图 文 并 成 </h3> 

<p> 这 是 一 个 图 片 结合 文字 的 缩 略 图 </p> 

<p> 

<a href="#" class="btn btn-default"> 进 入 </a> 
</p> 
</div> 
</div> 
</div> 


<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
<div class="caption"> 


<h3> 图 文 并 茂 </h3> 
<p> 这 是 一 个 图 片 结合 文字 的 缩 略 图 </p> 
<p> 
<a href="#" class="btn btn-default"> 进 入 </a> 
</p> 
</div> 
</div> 
</div> 


<div class="col-xs-6 col-md-3 col-sm-4"> 
<div class="thumbnail"> 
<img src="img/pic.png" alt=""> 
<div class="caption"> 


<h3> 图 文 并 成 </h3> 

<p> 这 是 一 个 图 片 结合 文字 的 缩 略 图 </p> 

<p> 

<a href="#" class="btn btn-default"> 进 入 </a> 
</p> 
</div> 
</div> 
</div> 
</div> 
</div> 


四 ' 警告 框 组件 


警告 框 组 件 是 一 组 预定 义 消 息 。 


<div class="alert alert-success">Bootstrap</div> 
<div class="alert alert-info">Bootstrap</div> 

<div class="alert alert-warning">Bootstrap</div> 
<div class="alert alert-danger">Bootstrap</div> 


// 带 关闭 的 警告 杠 


<div class="alert alert-success"> Bootstrap <button type="button" class="close" data-dism 
<span>&times;</span> 
</button> 
</div> 


证 EE :: 








// 自 动 适 配 的 超 链接 


<div class="alert alert-success"> Bootstrap， 请 到 官网 <a href="#" class="alert-link"> 下 载 </ 
</div> 


本 a 一 





第 11 章 进度 条 媒体 对 象 和 Well 组 件 


学 习 要 点 : 
1.Well 组 件 
2. 进 度 条 组 件 
3. 媒 体 对 象 组 件 


主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 三 个 组 件 功 能 


件 。 
一 . Well 组 件 
这 个 组 件 可 以 实现 简单 的 秦 入 效果 。 


// 识 入 效果 


<div class="well"> Bootstrap </div> 


/有 lg 和 sm 两 种 可 选 值 


<div class="wel]1 well-1g"> Bootstrap </div> 


二 : 进度 条 组 件 
度 条 组 件 为 当前 工作 流程 或 动作 提供 时 时 反馈 。 


<div class="progress"> 


<div class="progress-bar" style="width: 60%;"> 60% </div> 


</div> 


// 最 低 值 进度 条 


<div class="progress"> 


<div class="progress-bar" style="min-width:20px"> 0% </div> 


</div> 


: Well 组 件 、 


度 条 组 件 、 


媒体 对 象 组 


<div class="progress"> 
<div class="progress-bar progress-bar-success" style="min-width:20px;width:60%"> 60% 
</div> 


<| Se 











/条纹 状 ，IE10+ 支 持 


<div class="progress"> 
<div class="progress-bar progress-bar-success 
progress-bar-striped" style="min-width:20px;width:60%"> 60% </div> 
</div> 


// 动 画 效果 


<div class="progress"> 
<div class="progress-bar progress-bar-success progress-bar-stripedactive" style="min- 
</div> 


EE | 


// 堆 二 效果 





<div class="progress"> 
<div class="progress-bar progress-bar-success" style="min-width:20px;width:35%"> 35% 
<div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%"> 20% 
<div class="progress-bar progress-bar-danger" style="min-width:20px;width:10%"> 10% < 
</div> 


4 === Ea:: 
三 .媒体 对 象 组 件 





媒体 对 象 可 以 包含 图 片 、 视 频 或 音频 等 媒体 ， 以 达到 对 象 和 文本 组 合 显示 的 样式 效果 。 


// 基 本 实例 


<div class="media"> 
<div class="media-left"> 
<img src="img/small.png" alt="" class="media-object"> 
</div> 
<div class="media-body"> 
<h4 class="media-heading"> 标 题 </h4> 
<p> 企 拆 (学 名 : Spheniscidae) : 有 “海洋 之 舟 ”" 美 称 的 企 殷 是 一 种 最 古老 的 游 禽 ， 它 们 很 可 能 在 地 球 穿 上 
</div> 
</div> 


本 


// 媒 体 对 象 在 右边 





<div class="media"> 
<div class="media-body"> 
<h4 class="media-heading"> 标 题 </h4> 


<p> 企 的 (学 名 : Spheniscidae) : 有 “海洋 之 舟 ”" 美 称 的 企鹅 是 一 种 最 古老 的 游 禽 ， 它 们 很 可 能 在 地 球 穿 上 


</div> 
<div class="media-right"> 
<img src="img/small.png" alt="" class="media-object"> 
</div> 
</div> 


<| E 
/媒体 对 象 列 表 








<ul class="media-list"> 
<1i class="media"> // 将 每 个 media 存放 在 media-body 内 后 即 可 
.. .代码 较 多 ， 具 体 看 视频 </1i> 
</ul> 


第 12 章 列表 组 面板 和 襄 入 组 件 


学 习 要 点 : 

1. 列 表 组 组 件 
2. 面 板 组 件 

3. 响 应 式 甬 入 组 件 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 的 三 个 组 件 功能 : 列表 组 组 件 、 面 板 组 件 、 响 应 式 具 入 
组 件 。 


一 .列表 组 组 件 
列表 组 组 件 用 于 显示 一 组 列表 的 组 件 。 


// 基 本 实例 


<ul class="]list-group"> 


<li class="]list-group-item"> 1. 这 是 起 始 </1i> 
<li class="list-group-item"> 2. 这 是 第 二 条 数据 </1i> 
<1i class="list-group-item"> 3. 这 是 第 三 排 信息 </1i> 
<li class="list-group-item"> 4. 这 是 末尾 </1i> 
</UJ> 
/列表 项 带 勋 章 


<li class="1ist-group-item"> 1. 这 是 起 始 <span class="badge">10</span> 
</1i> 


// 链 接 和 首选 


<div class="list-group"> 
<a href="#" class="list-group-item active">1. 这 是 起 始 <span class="badge">10</span></a; 
<a href="#" class="list-group-item">2. 这 是 第 二 条 数据 </a> 
<a href="#" class="list-group-item">3. 这 是 第 三 排 信息 </a> 
<a href="#" class="]list-group-item">4. 这 是 末尾 </a> 
</div> 


4 
/按钮 式 列表 


<div class="1ist-group"> 
<button class="1ist-group-item active"> 1. 这 是 起 始 <span class="badge">10</span> 
</button> 
<button class="list-group-item"> 2. 这 
<button class="list-group-item"> 3. 这 
<button class="list-group-item"> 4. 这 


有 


是 第 二 条 数据 </button> 
是 第 三 排 信 息 </button> 
是 末尾 </button> 


</div> 


// 设 置 项 目 被 禁 


class="1list-group-item disabled" 


普 


1/ 情景 类 


<li class="list-group-item 1list-group-item-success"> 3. 这 是 第 三 排 信 息 </1i> 


<div class="list-group"> 
<a href="#" class="list-group-item active"> <h4> 内 容 标题 </h4> 
<p class="list-group-item-text"> 这 里 是 相关 内 容 详 情 ! </p> </a> 
<a href="#" class="list-group-item"> <h4> 内 容 标题 </h4> 
<p class="list-group-item-text"> 这 里 是 相关 内 容 详 情 ! </p> </a> 
<a href="#" class="list-group-item"> <h4> 内 容 标题 </h4> 
<p class="list-group-item-text"> 这 里 是 相关 内 容 详 情 ! </p> </a> 
</div> 


二 面板 组 件 
面板 组 件 就 是 一 个 存放 内 容 的 容器 组 件 。 


// 基 本 实例 


<div class="panel panel-default"> 
<div class="panel-body"> 这 里 是 详细 内 容 区 ! </div> 
</div> 


// 带 标题 容器 的 面板 


<div class="panel panel-default"> 

<div class="panel-heading"> 面板 标题 </div> 

<div class="panel-body"> 这 里 是 详细 内 容 区 ! </div> 
</div> 


// 也 可 以 设置 标题 元 素 


<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 


// 带 注脚 的 面板 


<div class="panel-footer"> 这 里 是 底部 </div> 


// 情 景 效果 : default、success 、info、warning、danger 、primary 


<div class="panel panel-success"> 


// 表 格 类 面板 


<div class="panel panel-default"> 
<div class="panel-heading"> 表格 标题 </div> 
<div class="panel-body"> 
<p> 这 里 是 表格 标题 的 详细 内 容 ! </p> 


</div> 
<table class="table"> 
大 
<th>1</th> 
<th>2</th> 
<th>3</th> 
</tr> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
</tr> 
</table> 
</div> 
// 列 表 类 面板 


<div class="panel panel-default"> 
<div class="panel-heading"> 表格 标题 </div> 
<div class="panel-body"> 
<p> 这 里 是 表格 标题 的 详细 内 容 ! </p> 
</div> 
<ul class="list-group"> 


<li class="list-group-item"> 1. 这 里 是 首页 </1i> 
<li class="list-group-item"> 2. 这 里 是 第 二 个 项 目 </1i> 
<li class="list-group-item"> 3. 这 里 是 第 三 个 项 目 </1i> 
<li class="list-group-item"> 4. 这 里 是 第 四 个 项 目 </1i> 
</ul> 
</div> 


三 .响应 式 瞬 入 组 件 


根据 被 齿 入 内 容 的 外 部 容器 的 宽度 ， 自 动 创 建 一 个 国定 的 比例 ， 从 而 让 浏览 器 自动 确定 内 容 
的 尺寸 ， 能 够 在 各 种 设备 上 缩放 。 


这 些 规则 可 以 直接 用 于 <iframe>、<embed>、<Vvideo> 和 <object> 元 素 。 


//16:9 响应 式 


<div class="embed-responsive embed-responsive-16by9"> 
<embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpi 
</div> 


| | 








//4:3 响应 式 


<div class="embed-responsive embed-responsive-4by3"> 
<embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpi 
</div> 


4 a 








第 13 章 模 态 框 插件 


学 习 要 点 : 
1. 基 本 使 用 
2. 用 法 说 明 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 中 的 模 态 框 插件 ， 这 是 一 款 交 互 式 网 站 非常 常见 的 弹 窗 
功能 插件 。 


基本 使 用 


使 用 模 态 框 的 弹 窗 组 件 需要 三 层 div 容器 元 素 ， 分 别 为 modal( 模 态 声明 层 ) 、 


> 


dialog( 窗 口 声明 层 )、content( 内 容 层 )。 在 内 容 层 里 面 ， 还 有 三 层 ， 分 别 为 header( 头 部 )、 


body( 主 体 )、footer( 注 脚 )。 


// 基 本 实例 


<1-- 模 态 声明 ，show 表示 显示 --> 


&lt;div class="modal show" tabindex="-1"&gt; 
&lLt;!-- 窗口 声明 --&gt; 
&lt;div class="modal-dialog"&gt; 
&lLt;!-- 内 容声 明 --&gt; 
&lt;div class="modal-content"&gt; 
&lt;!-- 头 部 --&gt; 
&lt;div class="modal-header"&gt; 
&lt;button type="button" class="close" data-dismiss="modal"&gt; 
&lt;spang&gt;&times;&lt;/spanggt; 


&lt;/buttonggt,; 
&lt;h4 class="modal-title"&gt; 会 员 登 录 &1lt;/h4&gt; 
&lt;/div&gt; 


&lt;!-- 主体 --&gt; 

&lt;div class="modal- ORVME Ol 
&lt;p&gt; 暂时 无 法 登录 会 员 &1lt;/p&gt; 

&lt;/div&gt; 

&lt;!-- 注脚 --&gt，; 

&lt;div class="modal-footer"&gt; 
&lt;button type="button" class="btn btn-default"&gt; 注册 &lt;/button&gt; 
&lt;button type="button" class="btn btn-primary"&gt; 登录 &lt;/button&gt; 


&lt;/div&gt; 
&lt;/div&gt; 
&1lt;/divegt; 
&lt;/div&gt; 
二 一 一 
如 果 想 让 模 态 框 自 动 隐藏 9 然后 点 击 按 钮 弹 窗 那么 需要 做 如 下 操作 


// 模 态 框 去 掉 show， 增 加 一 个 id 


<div class="modal" id="myModal"> 


// 点 击 触 发 模 态 框 显示 


<button class="btn btn-primary btn-1g" data-toggle="modal" data-target="#myModal"> 点 击 弹 蚀 


<| a 


一 








// 弹 窗 的 大 小 有 三 种 ， 黑 认 情 况 下 是 正常 ， 还 有 1g( 大 ) 和 sm( 小 ) 


<div class="modal-dialog modal-1g"> 
<div class="modal-dialog sm-1g"> 


// 可 设置 淡 入 淡出 效果 


<div class="modal fade" id="myModal"> 


// 在 主体 部 分 使 用 栅 格 系统 中 的 流体 


Rl 


&lt;div class="modal-body"e&gt; 
&lt;div class="container-fluid"&gt; 
&lt;div class="row"&gt; 
&lt;div class="col-md-4"&gt; 1 &]lt;/div&gt; 
&lt;div class="col-md-4"&gt; 1 &]lt;/div&gt; 
&lt;div class="col-md-4"&gt; 1 &]lt;/div&gt; 
&lt;/div&gt; 
&lt;/dive&gt; 
&lt;/dive&gt,; 


二 .用 法 说 明 


基本 使 用 介绍 结束 之 后 ， 我 们 就 来 看 下 插件 的 各 种 重要 用 法 。 所 有 的 插件 ， 都 是 基于 


JavaScriptjQuery 的 。 那 么 ， 就 有 四 个 要 素 : 用 法 、 参 数 、 方 法 和 事件 。 
1. 用 法 

第 一 种 : 可 以 通过 data 属性 

//data-toggle 


data-toggle="modal" data-target="#myModal" 


data-toggle 表示 触发 类 型 


data-target 表示 触发 的 节点 


如 果 不 是 使 用 <button>， 而 是 <a>， 其 中 data-target 也 可 以 使 用 href="#myModal" 
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取代 。 当 然 ， 我 们 建议 使 用 data-target。 除 了 data-toggle 和 data-target 两 个 声明 属性 外 ， 
还 有 一 些 可 以 用 选项 。 


2. 参 数 


可 以 通过 在 HTML 元 素 上 设置 data-* 的 属性 声明 来 控制 效果 。 


默认 值 true, 表示 背景 存在 黑 灰 透明 

遮 单 ， 且 单 击 空白 背景 可 关闭 弹 窗 ; 

如 果 为 false， 表 示 背 景 不 存在 黑 灰 
1 布尔 值 或 透明 遮 单 ， 且 点 击 空白 背景 不 可 关闭 
ata-backdrop ED 弹 窗 ， 

如 果 是 字符 串 ' static'"， 表 示 背 景 存 

在 黑 灰 透明 遮 单 ， 且 点 击 空白 不 可 关 


如 果 是 true， 按 esc 键 会 关闭 窗口 ; 
如 果 是 false, 按 esc 键 会 不 会 关闭 。 
本 如 果 是 true， 初 始 化 时 ， 默 认 显示 ; 
如 果 是 false， 初 始 化 时 ， 默 认 隐 藏 。 


如 果 值 不 是 以 # 叶 开头 ， 则 表示 一 个 
url 地 址 ， 加 载 url 内 容 到 

href 2 modal-content 容器 里 , 并 只 加 载 一 
次 。 如 果 是 # 号 ， 就 是 取代 
data-target 的 方法 。 


// 空 白 背景 且 点 击 不 关闭 





data-backdrop="false" 


// 按 下 esc 不 关闭 


data-keyboard="false" 


// 初 始 化 隐藏 ， 如 果 是 按钮 点 击 触 发 ， 第 一 次 点 击 则 无 法 显示 ， 第 二 次 显示 。 


data-show="false" 


// 加 载 一 次 index.html 到 容器 内 


href="index.html" 
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当然 ， 也 可 以 在 JavaScript 直接 设置 。 


布尔 值 或 默认 值 true,， 表 示 背 景 存在 黑 灰 透明 
backdrop 遮 单 ， 且 单 击 空白 背景 可 关闭 弹 窗 ; 
Cd 如 果 为 false， 表 示 背 景 不 存在 黑 灰 


透明 遮 单 ， 且 点 击 空白 背景 不 可 关闭 
弹 窗 ; 

如 果 是 字符 串 'static', 表示 背景 存 
在 黑 灰 透明 遮 单 ， 且 点 击 空 白 不 可 关 
闭 弹 窗 。 


keyboard 布尔 如果 是 true， 接 esc 键 会 关闭 窗口， 
eyboar A 如 果 是 false, 按 esc 键 会 不 会 关闭 。 
下 如 果 是 true， 初 始 化 时 ， 默 认 显示 ; 
尔 如 果 是 false, 初始 化 时 ,默认 隐藏 
远程 获取 指定 内 容 填 充 到 
ne | 


// 通 过 jQuery 方式 声明 





$('#myModal').modal({ 
show : true, 
backdrop : false, 
keyboard : false, 


remote : 'index.html', 
}); 
3. 方 法 
如 果 说 ， 黑 认 不 显示 弹 窗 ， 那 么 怎么 才能 通过 点 击 前 后 弹 窗 呢 ? 


-modal( 'toggle'); | 触发 时 ， 反 转 切换 弹 窗 状态 





$('#btn').on('click', function() { 
$('#myModal').modal('show'); 
}); 


4. 事 件 
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模 态 框 支 持 4 种 时 间 ， 分 别 对 应 弹出 前 、 弹 出 后 、 关 闭 前 和 关闭 后 。 


事件 类 型 


在 show 方法 调用 时 立即 触发 。 


在 模 态 框 完全 显示 出 来 , 并 且 等 Css 动画 完成 之 后 触 
shown .bs .modal 发 

Xo 
hide.bs.modal 在 hide 方法 调用 时 ， 但 还 未 关闭 隐藏 时 触发 。 


在 模 态 框 完全 隐藏 之 后 , 并 且 等 Css 动画 完成 之 后 触 


hidden.bs.modal g 
发 。 





$('#myModal').on('show.bs.modal', function() { 
alert(' 在 show 方法 调用 时 立即 触发 1 '); 
}); 


$('#myModal').on('shown.bs.modal', function() { 
alert(' 在 模 态 框 显 示 完 毕 后 触发 ! '); 
}); 


$('#myModal').on('hide.bs.modal', function() { 
alert(' 在 hide 方法 调用 时 立即 触发 1 '); 

}); 

$('#myModal').on('hiden.bs.modal', function() { 
alert(' 在 模 态 框 显 示 完 毕 后 触发 ! ')， 

}); 

$('#myModal').on('loaded.bs.modal', function() { 
alert(' 远 程 数据 加 载 完毕 后 触发 1 ')， 

}); 
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第 14 章 下 拉 菜 单 和 滚动 监听 插件 


学 习 要 点 : 
1. 下 拉 菜 j 
2. 滚 动 监听 
主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 中 的 下 拉 菜 单 插件 ， 这 个 插件 在 以 组 件 的 形式 我 们 已 经 
学 习 过 ， 那 么 现在 来 看 看 怎么 和 JavaScript 交互 的 。 


一 .下 拉 菜 
常规 使 用 中 ， 和 组 件 方法 一 样 ， 代 码 如 下 : 


/声明 式 用 法 


<div class="dropdown"> 
<button class="btn btn-primary" data-toggle="dropdown"> 下 拉 菜 单 <span class="caret"><. 
</button> 
<ul class="dropdown-menu"> 
<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 产 品 </a></1i> 
<1i><a href="#"> 资 讯 </a></1i> 
<li><a href="#"> 关 于 </a></1i> 
</UJ> 
</div> 


用 


声明 式 用 法 的 关键 核心 : 





1. 外 围 容器 使 用 class="dropdown" 包 衷 ; 
2. 内 部 点 击 按钮 事件 绑 定 data-toggle="dropdown"; 
3. 菜 单元 素 使 用 class="dropdown-menu"。 
// 如 果 按 钮 在 容器 外 部 ， 可 以 通过 data-target 进行 绑 定 。 

<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown"> 
本 了 刚 ,| 
在 JavaScript 调用 中 ， 没 有 属性 ， 方 法 并 不 好 用 ， 下 面 介绍 四 个 基本 事件 。 


// 下 拉 菜 单方 法 ， 但 仍然 需要 data-* 
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$('#btn').dropdown(); 
$('#btn').dropdown('toggle'); 


下 拉 菜 单 支持 4 种 事件 ， 分 别 对 应 弹出 前 、 弹 出 后 、 关 闭 前 和 关闭 后 。 


TITTTY 


在 下 拉 菜 单 完全 显示 出 来 , 并 且 等 Css 动画 完成 之 后 
shown .bs .dropdown 触发 


在 hide 方法 调用 时 ， 但 还 未 关闭 隐藏 时 触发。 
在 下 拉 菜 单 完 全 隐藏 之 后 , 并 且 等 css 动画 完成 之 后 
hidden.bs .dropdown 触发 


// 事 件 ， 其 他 雷同 





$('#dropdown').on('show.bs.dropdown', function() { 
alert(' 在 调用 show 方法 时 立即 触发 ! '); 
}); 


二 :滚动 监听 


滚动 监听 插件 是 用 来 根据 滚动 条 所 处 在 的 位 置 自动 更 新 导航 项 目 ， 显 示 导 航 项 目 高 完 显 示 。 


1/ 基本 实例 
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<nav id="nav" class="navbar navbar-default"> 
<a href="#" class="navbar-brand'">Web 开发 </a> 


<ul class="nav navbar-nav"> 
<]1i> 
<a href="#html5">HTML5</a> 
</1i> 
<]1i> 
<a href="#bootstrap">Bootstrap</a> 
</1i> 
<l1i class="dropdown"> 
<a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a> 
<ul class="dropdown-menu"> 
<]1i> 
<a href="#jquery">jQuery</a> 
</1i> 
<]1i> 
<a href="#yui">Yui</a> 
</1i> 
<]1i> 
<a href="#ext]js">Extjs</a> 
</1i> 
</ul> 
</1i> 
</ul> 
</nav> 


<div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: 


<h4 
<p> 


<h4 
<p> 
<h4 
<p> 
<h4 
<p> 
<h4 
<p> 
</div> 


几 村: 


id="htm15">HTML5</h4> 
标准 通用 标记 语言 下 的 一 个 应 用 HTML 标准 自 1999 年 12 月 发 布 的 HTML4.01 后 ， 后 继 的 HTML5 和 其 


双方 决定 进行 合作 ， 来 创建 一 个 新 版 本 的 HTML。 </p> 

id="bootstrap">Bootstrap</h4> 

Bootstrap， 来 自 Twitter， 是 目前 很 受 欢迎 的 前 端 框架 。Bootstrap 是 基于 HTML、 CSS、 JAVASCR 
id="jquery">jQuery</h4> 

JQuery 是 继 prototype 之 后 又 一 个 优秀 的 Javascript 库 。 它 是 轻 量 级 的 jS 库 ， 它 兼容 CSS3 ,之 
id="yui">Yui</h4> 

近 几 年 随 着 jQuery、Ext 以 及 CSS3 的 发 展 ， 以 Bootstrap 为 代表 的 前 端 开 发 框架 如 雨后春笋 般 挤 入 神 
id="extjs">Extjs</h4> 

ExtJS 可 以 用 来 开发 RIA 也 即 富 客户 端的 AJAX 应 用 ， 是 一 个 用 javascript 写 的 ， 主 要 用 于 创建 前 端 太 





这 里 有 两 个 重要 的 属性 ， 如 下 图 : 


ef 默认 值 为 19， 固 定 卉 内 容 距 滚动 容器 19 像素 以 内 ， 
就 高 亮 显 示 所 对 应 的 菜单 。 


data-spy 设置 scro1l1， 将 设置 滚动 容器 监听 。 





data-target 设置 #nav， 绑 定 指定 监听 的 菜单 


PS : 在 一 个 菜单 和 一 个 容易 的 时 候 ，data-target 不 设置 也 可 以 稳定 实现 滚动 监听 高 亮 。 但 多 


个 导航 时 


， 你 不 关联 其 中 一 个 ， 会 导致 错误 ， 所 以 ， 一 般 要 加 上 。 


如 果 使 用 JavaScript 脚本 方式 ， 可 以 去 掉 data-*， 使 用 脚本 属性 定义 : offset、spy 和 


target。 具 


体 方法 如 下 : 


// 使 用 脚本 方式 定义 属性 


$('#content').scrollspy({ 
offset : 0, 
target : '#nav', 


}); 


滚动 监听 还 有 一 个 切换 到 新 条 目的 事件 。 


事件 名 


发 此 事件 。 





每 当 一 个 新 条 目 被 激活 后 都 将 由 滚动 监听 插件 触 
activate.bs.scrollspy 


1/ 事件 绑 定 在 导航 上 


$('#nav').on('activate.bs.scrollspy', function() { 
alert(' 新 条 目 被 激活 后 触发 此 事件 1 ')，; 
}); 


滚动 监听 还 有 一 个 更 新 容器 DOM 的 方法 。 


/HTML 部 分 





<section class="sec"> 
<h4 id="htm15">HTML5 <a href="#" onclick="removeSec(this)"> 删 除 此 项 </a></h4> 
<p> ... </p> 

</section> 


/删除 内 容 时 ， 刷 新 一 下 DOM， 人 避免 导航 监听 错位 


function removeSec(e) { 
$(e).parents('.sec').remove(); 
$('#content').scrollspy('refresh'); 


cm 


注意 : 这 个 方法 必须 使 用 data-* 声 明 式 。 


第 1 5 草 标 签 页 和 工具 提示 插件 


主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 中 的 标签 页 和 工具 提示 插件 。 


标签 页 也 就 是 通常 所 说 的 选项 卡 功能 。 


<ul class="nav nav-tabs"> 
<l1i class="active"> 
<a href="#html5" data-toggle="tab">HTML5</a> 
</1i> 
<]1i> 
<a href="#bootstrap" data-toggle="tab">Bootstrap</a> 
</1i> 
<]1i> 
<a href="#jquery" data-toggle="tab">jQuery</a> 
</1i> 
<]1i> 
<a href="#extjs" data-toggle="tab">ExtJS</a> 
</1i> 
</ul> 


<div class="tab-content" style="padding: 10px;"> 


<div class="tab-pane active" id="html5"> ... </div> 
<div class="tab-pane" id="bootstrap"> ... </div> 
<div class="tab-pane" id="jquery"> ... </div> 
<div class="tab-pane" id="extjs"> ... </div> 

</div> 


// 可 以 设置 淡 入 淡出 效果 fade ;而 in 表示 首选 的 内 容 默 认 显 示 


<div class="tab-pane fade in active" id="html5"> 


// 也 可 以 换 成 胶 宫 式 


<ul class="nav nav-pills"> 


//data-target 


使 用 data-target 绑 定 或 不 绑 定 效果 都 是 一 样 的 


// 使 用 JavaScript， 直 接 使 用 tab 方法 。 


$('#nav a').on('click', function(e) { 
e.preventDefault(); 
$(this).tab('show'); 

}); 





// 事 件 ， 其 他 雷同 


$('#nav a').on('show.bs.tab', function() { 
alert(' 调 用 tab 时 触发 ! ')，; 

}); 

$('#nav a').on('shown.bs.tab', function() { 
alert(' 显 示 完 tab 时 触发 1 '); 

}); 


= - 工具 提示 


3 


工具 提示 就 是 通过 和 鼠标 移动 选 定 在 特定 的 元 素 上 时 ， 显 示 相 关 的 提示 语 。 
// 基 本 实例 


广大 


<a href="#" data-toggle="tooltip" title=" 超 文本 标识 符 ">HTML5</a> 


$('#section').tooltip(); 


工具 提示 有 很 多 属性 来 配置 提示 的 显示 ， 具 体 如 下 : 
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默认 true， 在 tooltip 上 应 用 一 个 CSS fade 动画 。 
data-animation 


如 果 设 置 false， 则 不 应 用 。 


PA 默认 false, 不 允许 提示 内 容 格 式 为 html。 如 果 设 置 
es 为 true， 则 可 以 设置 html 格式 的 提示 内 容 。 
默认 值 top， 还 有 bottom、left、right 和 auto。 


data-placement 如 果 auto 会 自行 调整 合适 的 位 置 , 如 果 是 auto left 
则 会 尽量 在 左边 显示 ， 但 左边 不 行 就 靠 右边 。 


默认 false， 可 以 选择 绑 定 指定 的 选择 器 。 
默认 空 字符 串 ， 提 示 语 的 内 容 。 优 先 级 比 title 低 


默认 值 hover foucs， 表 示人 怎么 触发 tooltip， 其 
data-trigger 他 值 为 : click、manual。 多 个 值 用 空格 隔 开 , manual 
手动 不 能 和 其 他 同时 设置 。 
默认 值 6, 延迟 触发 tooltip( 毫 秒 ), 如 果 传 数字 则 ， 
data-delay 区 
表示 show/hide 的 毫秒 数 ， 如 果 传 对 象 ， 结 构 为 : 
EE 


默认 值 false, 将 tooltip 附加 到 特定 的 元 素 上 。 比 
data-container 如 组 全 按钮 组 提示 ， 容 器 不 够 ， 可 以 附加 body 上 。 
container : “body” 
更 改 提 示 框 的 HTML 提示 语 的 模版 ， 默 认 值 为 : <div 
class= "tooltip'" ><div 
data-template 有 有 
class="'tooltip-arrow'></div><div 


class= "tooltip-Iinner'"></div></div>。 





广大 人 


<a href="#" rel="tooltip" data-toggle="tooltip" title=" 超 文本 标识 符 " data-animation="false" 
>HTML5</a> 


到 二 = 


JavaScript 方式 直接 去 掉 前 面 的 data 即 可 。 和 包括 : animation、html、placement 、selector、 
original-title 、title、trigger、delay、container 和 template 等 属性 。 





//JavaScript 方式 


$('#section a').tooltip({ 
delay : { 
show : 500, 
hide : 100, 
}, 


container : 'body' }); 


JavaScript 有 四 个 方法 : show、hide、toggle 和 destroy 四 种 。 
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// 显 示 

$('#section 
$('#section 
$('#section 
$('#section 


.tooltip('show' ); // 隐 茂 
.tooltip('hide'); // 反 转 显示 和 隐藏 
.tooltip('toggle'); // 隐 藏 并 销毁 
.tooltip('destroy'); 


见 见 见 见 
We ea 


Tooltip 中 事件 有 四 种 。 


在 show 方法 调用 时 立即 触发 


hide.bs.tooltip 在 hide 方法 调用 时 立即 触发 
hidden.bs.tooltip 在 提示 框 完全 隐藏 之 后 触发 


/事件 ， 其 他 雷同 





$('#select a').on('show.bs.tooltip', function() { 
alert(' 调 用 show 时 触发 !')，; 
}); 
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第 16 章 弹 出 框 和 警告 框 插件 


学 习 要 点 : 
1. 弹 出 框 
2. 警 告 杠 


主讲 教师 : 李 炎 恢 


党 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 中 的 弹出 框 和 警告 框 插件 。 
一 弹出 框 
弹出 框 即 点 击 一 个 元 素 弹 出 一 个 包含 标题 和 内 容 的 容器 。 
// 基 本 用 法 
<button class="btn btn-1g btn-danger" type="button" data-toggle="popover" title=" 弹 出 框 " d 
国 要 = 


//JavaScript 初始 化 





$('button').popover(); 


弹出 框 插件 有 很 多 属性 来 配置 提示 的 显示 ， 具 体 如 下 : 
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默认 true， 在 popover 上 应 用 一 个 CSs fade 动画 。 
如 果 设 置 false， 则 不 应 用 。 

默认 false, 不 允许 提示 内 容 格式 为 html。 如果 设 置 
为 true， 则 可 以 设置 html 格式 的 提示 内 容 。 


默认 值 top， 还 有 bottom、left、right 和 auto。 


data-placement 如 果 auto 会 自行 调整 合适 的 位 置 , 如 果 是 auto left 
则 会 尽量 在 左边 显示 ， 但 左边 不 行 就 靠 右边 。 


默认 false， 可 以 选择 绑 定 指定 的 选择 器 。 
默认 空 字 符 串 ， 弹 出 框 的 标题 。 优 先 级 比 title 低 


默认 值 click， 表 示 怎 么 触发 popover， 其 他 值 为 : 
data-trigger hover、focus、manual。 多 个 值 用 空格 隔 开 , manual 
手动 不 能 和 其 他 同时 设置 。 


默认 值 @, 延迟 触发 popover( 毫 秒 )， 如 果 传 数字 则 ， 
data-delay 表示 show/hide 的 毫秒 数 ， 如 果 传 对 象 ， 结 构 为 ; 
{show:596,hide:166} 


默认 值 false, 将 popover 附加 到 特定 的 元 素 上 。 比 
data-container 如 组 合 按 钮 组 提示 ， 容 器 不 够 ， 可 以 附加 body 上 。 

container : “body” 

更 改 提示 框 的 HTML 提示 语 的 模版 ， 默 认 值 为 : <div 


class="popover"><div 


data-template class="arrow" ></div><h3 
class="popover-title"></h3><div 


class="popover-content"></div></div> 


设置 外 围 容 器 的 边际 ， 具 体 代码 看 示例 。 


$('button').popover({ 
container : 'body', 
viewport : { 
selector : '#View', 
padding : 109, 


}); 


通过 JavaScript 执行 的 方法 有 四 个 。 


// 显 示 

$('button').popover('show' ); // 隐 藏 
$('button').popover('hide'); // 反 转 显示 和 隐藏 
$('button').popover('toggle' )，// 隐 藏 并 销毁 
$('button').popover('destroy'); 


第 16 章 弹出 框 和 警告 框 插件 





226 


Popover 插件 中 事件 有 四 种 : 


事件 类 型 
在 调用 show 方法 时 触发 


在 调用 hide 方法 时 触发 


hidden.bs .popover 在 完全 关闭 整个 弹出 时 触发 





1 事件， 其 他 雷同 


$('button').on('show.bs.tab', function() { 
alert(' 调 用 show 方法 时 触发 1 ')，; 
}); 


警告 框 即 为 点 击 小 时 的 信息 框 。 


// 基 本 实例 


<div class="alert alert-warning"> 
<button class="close" type="button" data-dismiss="alert"> 
<span>&times;</span> 


</button> 
<p> 警告 : 您 的 浏览 器 不 支持 ! </p> 
</div> 


图 - 一 





// 添 加 淡 入 淡出 效果 
<div class="alert alert-warning fade in"> 


如 果 用 JavaScript， 可 以 代替 data-dismiss="alert" 


//JavaScript 方法 


$('.close').on('click', function() { 
$('#alert').alert('close'); 
}) 


Alert 插件 中 事件 有 两 种 : 
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当 close 方法 被 调用 后 立即 触发 


当 警 告 框 被 完全 关闭 后 立即 触发 


// 事 件 ， 其 他 雷同 





$('#alert').on('close.bs.alert', function() { 
alert(' 当 close 方法 被 触发 时 调用 | ')， 
}); 
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第 17 章 按钮 和 折 党 插件 


学 习 要 点 : 
1. 按 钮 
2. 折 受 
主讲 教师 : 李 炎 恢 
本 节 课 我 们 主要 学 习 一 下 Bootstrap 中 的 按钮 和 折 和 有 重播 件 。 
一 按钮 
可 以 通过 按钮 插件 创建 不 同 状态 的 按钮 。 
// 单 个 切换 。 
<button class="btn btn-primary" data-toggle="button" autocomplete="off"> 单 个 切换 </button> 
| 


注 :在 Firefox 多 次 页 面 加 载 时 ， 按 钮 可 能 保持 表单 的 禁用 或 选择 状态 。 解 决 方案 是 : 添加 
autocomplete="off" 。 


// 单 选 按钮 
<div class="btn-group" data-toggle="buttons"> 
<label for="" class="btn btn-primary active"> 
<input type="radio" name="sex" autocomplete="off" checked> 男 </label> 
<label for="" class="btn btn-primary"> 


<input type="radio" name="sex" autocomplete="off"> 女 </label> 
</div> 


MM 二 让 


// 复 选 按钮 





<div class="btn-group" data-toggle="buttons"> 


<label] for="" class="btn btn-primary active"> 
<input type="checkbox" name="fa" autocomplete="off" checked> 音乐 </label> 
<label for="" class="btn btn-primary"> 
<input type="checkbox" name="fa" autocomplete="off"> 体育 </label> 
<label] for="" class="btn btn-primary"> 
<input type="checkbox" name="fa" autocomplete="off"> 美术 </label> 
<label for="" class="btn btn-primary"> 


<input type="checkbox" name="fa" autocomplete="off"> 电脑 </label> 
</div> 


// 加 载 状 态 


<button id="myButton" type="button" data-loading-text="Loading..."class="btn btn-primary" 


到 


| 








$('#myButton').on('click', function() { var btn = $(this).button('loading'); 


setTimeout(function() { 
btn.button('reset'); 

}, 1099); 
}); 


Button 插件 中 的 button 方法 中 有 三 个 参数 : 


complete)° 


/可 代替 data-toggle="button" 


$('button').on('click', function() { 
$(this).button('toggle'); 
}) 


二 折 党 
通过 点 击 可 以 折 司 内 容 。 


// 基 本 实例 


toggle、reset 、string( 比 如 loading、 


<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> Bootstrap 


<div class="collapse" id="content"> 


<div class="well"> Bootstrap 是 Twitter 推出 的 一 个 用 于 前 端 开 发 的 开源 工具 包 。 它 由 
Twitter 的 设计 师 Mark Otto 和 Jacob Thornton 合作 开发 ， 是 一 个 CSS/HTML 框架 。 目 前 , Bootst 


</div> 


ER 


// 手 风 合 折 答 





<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 


<h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-pa 
</div> 
<div id="collapseOne" class="panel-collapse collapse in"> 
<div class="panel-body"> 这 里 是 第 一 部 分 。 </div> 
</div> 
</div> 


<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-pa 
</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
<div class="panel-body"> 这 里 是 第 二 部 分 。 </div> 
</div> 
</div> 


<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse" data- 
</div> 
<div id="collapseThree" class="panel-collapse collapse"> 
<div class="panel-body"> 这 里 是 第 三 部 分 。 </div> 
</div> 
</div> 
</div> 


默认 值 为 false， 设 置 需 指定 父 元 素 选择 器 。 也 就 是 


data-parent 说 ， 选 定 其 中 一 个 折 有 登 区 ， 其 他 折 和 登 将 隐藏 ， 实 现 手 
风 歼 效果 。 
如 果 前 面 加 data-*， 设 置 'collapse' 表示 实现 折 
data-toggle 登 ; 如 果 是 Javascript 中 的 属性 ， 默 认为 true， 
实现 反 转 。 





// 手 风琴 效果 


$('#collapseOne, #collapseTwo,#collapseThree, #collapseFour').collapse({ 
parent : '#accordion', 
toggle : false, 


}); 


// 手 动 调 用 


$('button').on('click', function() { 
$('#collapseOne').collapse({ 
toggle : true, 
}); 


}); 


//collapse 方法 还 提供 了 三 个 参数 : hide、show 、toggle。 
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$('#collapseOone').collapse('hide'); 
$('#collapseTwo').collapse('show'); 
$('button').on('click', function() { 

$('#collapseOne').collapse('toggle'); 
}); 


Collapse 插件 中 事件 有 四 种 。 


事件 类 型 
在 show 方法 调用 时 立即 触发 


shown.bs.collapse 折 登 区 完全 显示 出 来 是 触发 
hide.bs.collapse 在 hide 方法 调用 时 触发 
hidden.bs.collapse | 该 事件 在 折 受 区 域 完全 隐藏 之 后 触发 


// 事 件 ， 其 他 雷同 





$('#collapseOne').on('show.bs.collapse', function() { 
alert(' 当 show 方法 调用 时 触发 ')，; 
}); 
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第 18 章 轮 播 插件 


学 习 要 点 : 
1. 轮 播 插件 


主讲 教师 : 李 炎 恢 


本 节 课 我 们 主要 学 习 一 下 Bootstrap 中 的 轮 播 插件 。 


轮 播 插件 就 是 将 几 张 同等 大 小 的 大 图 ， 按 照 顺序 依次 播放 。 


// 基 本 实例 。 


<div id="myCarousel" class="carousel slide"> 


<ol class="carousel-indicators"> 
<li data-target="#myCarousel" 
<li data-target="#myCarousel" 
<li data-target="#myCarousel" 
</01> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="img/slide1.png" 
</div> 
<div class="item"> 
<img src="img/slide2.png" 
</div> 
<div class="item"> 
<img src="img/slide3.png" 
</div> 
</div> 


data-slide-to="0" class="active"></1i> 
data-slide-to="1"></1i> 
data-slide-to="2"></1i> 


alt=" 第 一 张 "> 


alt=" 第 二 张 "> 


alt=" 第 三 张 "> 


<a href="#myCarousel" data-slide="prev" class="carousel-controlleft">&lsaquo;</a> 
<a href="#myCarousel" data-slide="next" class="carousel-controlright">&rsaquo;</a> 


</div> 


data 属性 解释 : 


1.data-slide 接受 关键 字 prev 或 next， 用 来 改变 幻灯 片 相 对 于 当前 位 置 的 位 置 ; 


2.data-slide-to 来 向 轮 播 底部 创建 一 个 原始 滑动 索引 ，data-slide-to="2" 将 把 滑动 块 移动 到 一 


个 特定 的 索引 ， 索 引 从 0 开始 计数 。 


3.data-ride="carousel" 属 性 用 户 标记 轮 播 在 页 面 加 载 时 开始 动画 播放 。 


李 炎 恢 HTML CSS JavaScript PHP Bootstrap 教程 


属性 名 称 
So Re 默认 值 5988， 幻 灯 片 的 等 待 时 间 ( 毫 秒 ) 。 如 果 为 
Eee false， 轮 播 将 不 会 自动 开始 循环 。 


> We 默认 鼠标 停留 在 幻灯 片区 域 (hover) 即 暂停 轮 播 , 鼠 
9 标 离开 即 启 动 轮 播 。 
默认 值 true， 轮 播 是 否 持续 循环 。 


如 果 在 JavaScript 调用 就 直接 使 用 键 值 对 方法 ， 并 去 掉 data- ; 





// 设 置 自 定义 属性 


$('#myCarousel').carousel({ // 设 置 自动 播放 /2 种 
interval : 2000，// 设 置 暂停 按钮 的 事件 
pause : 'hover'，// 只 播 一 次 
wrap : false, 


}); 


轮 播 插件 还 提供 了 一 些 方法 ， 如 下 : 


SS 
轮 播 到 指定 的 图 片上 (小 标 从 8 开始 ， 类 似 数组 ) 


// 点 击 按钮 执行 


$('button').on('click'，function() { // 点 击 后 ， 自 动 播放 
$('#myCarousel').carousel('cycle'); // 其 他 雷同 
}); 


当 调用 slide 实例 方式 时 立即 触发 该 事件 。 


slid.bs.carousel 当 轮 播 完成 一 个 幻灯 片 触 发 该 事件 。 





/事件 
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$('#myCarousel').on('slide.bs.carousel', function() { 
alert(' 当 调用 slide 实例 方式 时 立即 触发 ) ; 
}); 


$('#myCarousel').on('slid.bs.carousel', function() { 
alert(' 当 轮 播 完成 一 个 幻灯 片 触发 ' ) ; 
}); 


第 19 章 附加 导航 插件 


学 习 要 点 : 

1. 附 加 导航 插件 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 主要 学 习 一 下 Bootstrap 中 的 附加 导航 插件 。 
一 .附加 导航 

附加 导航 即 粘 贴 在 屏幕 某 处 实现 锚 点 功能 。 


// 基 本 实例 


<body data-spy="scroll" data-target="#myScrollspy"> 


<div class="container"> 

<div class="jumbotron" style="height:150px"> 

<h1i>Bootstrap Affix</h1i> 
</div> 
<div class="row"> 

<div class="col-xs-3" id="myScrollspy"> 

<ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="15 
<1li class="active"> 
<a href="#section-1"> 第 一 部 分 </a> 





</1i> 
< 加 全 

<a href="#Ssection-2"> 第 二 部 分 </a> 
</1i> 
<]1i> 

<a href="#Ssection-3"> 第 三 部 分 </a> 
</1i> 
< > 

<a href="#Ssection-4"> 第 四 部 分 </a> 
</1i> 
< 二 > 

<a href="#Ssection-4"> 第 五 部 分 </a> 
</1i> 

</ul> 


</div> 
<div class="col-xs-9"> 





<h2 id="section-1"> 第 一 部 分 </h2> 
<p> ... </p> 
<h2 id="section-2"> 第 二 部 分 </h2> 
<p> ... </p> 
<h2 id="section-3"> 第 三 部 分 </h2> 
<p> ... </p> 
<h2 id="section-4"> 第 四 部 分 </h2> 
<p> ... </p> 
<h2 id="section-5"> 第 四 部 分 </h2> 
<p> ... </p> 
</div> 
</div> 
</div> 
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// 导 航 的 CSS 部 分 


ul.nav-pills { width: 200px; 
} ul.nav-pills.affix { top: 30px; 
} 


/JavaScript 代替 data-spy="affix" data-offset-top="125" 


$('#myAffix').affix({ 
offset : { 
top : 150 } 
}) 


我 们 默认 使 用 的 是 topp， 当 然 也 可 以 默认 居 底 bottom 。 这 个 定位 方式 是 直接 通过 CSS 定 位 
的 。 


// 设 置 成 bottom 


ul.nav-tabs.affix-bottom { bottom: 30px; 
} 


// 设 置 成 bottom 


$('#myAffix').affix({ 
offset : { 
bottom : 150 } 
}) 


Affix 包含 几 个 事件 ， 如 下 : 





在 定位 结束 之 前 立即 触发 

在 定位 结束 之 后 立即 触发 

在 定位 元 素 应 用 affixed-top 效果 之 前 触发 
在 定位 元 素 应 用 affixed-top 效果 之 后 触发 

在 定位 元 素 应 用 affixed-bottom 效 果 之 前 触发 
在 定位 元 素 应 用 affixed-bottom 效果 之 后 触发 





$('#myAffix').on('affixed-top.bs.affix', function() { 
alert(' 触 发 ! '); 
}); 
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第 20 章 项 目 实战 -- 响 应 式 导 航 [ 们 


学 习 要 点 : 

1. 响 应 式 导 航 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 开始 设计 第 一 个 项 目 ， 一 个 内 训 公司 的 企业 网 站 ， 本 节 课 学 习 响 应 式 导 航 部 分 。 
一 .响应 式 导航 


// 基 本 导航 组 件 + 响 应 式 


<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
<div class="navbar-header"> 
<a href="#" class="navbar-brand" style="margin:0;padding:0;"><img src="img/10o 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-targe 
<Span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
</div> 
<div class="collapse navbar-collapse" id="navbar-collapse"> 
<ul class="nav navbar-nav navbar-right" style="margin-top:0;"> 
<1li class="active"> 
<a href="#"><span class="glyphiconglyphicon-home"></span> 首页 </a> 
</1i> 
< 二 > 
<a href="#"><Span class="glyphicon 
glyphicon-1list"></span> 资讯 </a> 
</1i> 
< 二 > 
<a href="#"><span class="glyphicon 
glyphicon-fire"></span> 案例 </a> 
</1i> 
<]1i> 
<a href="#"><span class="glyphicon 
glyphicon-question-sign"></span> 关于 </a> 
</1i> 
</ul> 
</div> 
</div> 
</nav> 


国 于 sd 
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学 习 要 点 

1. 响 应 式 轮 播 图 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 要 在 导航 条 的 下 方 做 一 张 轮 播 图 ， 自 动 播放 最 新 的 重要 动态 。 
一 响应 式 轮 播 图 


// 响 应 式 轮 播 图 


<div id="myCarousel" class="carousel slide"> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class="active"></1i> 
<l1i data-target="#myCarousel" data-slide-to="1"></1i> 
<l1i data-target="#myCarousel" data-slide-to="2"></1i> 
</o01> 
<div class="carousel-inner"> 
<div class="item active" style="background:#223240;"> 
<a href="#"><img src="img/slide1.png" alt=" 第 一 张 "></a> 
</div> 
<div class="item" style="background:#F5E4DC;"> 
<a href="#"><img src="img/slide2.png" alt=" 第 二 张 "></a> 
</div> 
<div class="item" style="background:#DE2A2D;"> 
<a href="#"><img src="img/slide3.png" alt=" 第 三 张 "></a> 
</div> 
</div> 
<a href="#myCarousel" data-slide="prev" class="carousel-controlleft">&lsaquo;</a> 
<a href="#myCarousel" data-slide="next" class="carousel-controlright">&rsaquo;</a> 
</div> 


// 所 需要 的 jQuery 控制 


$('#myCarousel' ).carousel({ // 设 置 自动 播放 /2 秒 
interval : 3000, 
}); 


/调整 轮 播 器 箭头 位 置 


$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px'); 
$(window).resize(function() { var $height = $('.carousel-inner img').eq(0).height() || $( 
$('.carousel-control').css('line-height', $height + 'px'); 


}); 
回 宇 = 一 


/所 需要 的 CSS 





a:focus { outline: none 

} .navbar-brand { padding: 09; 

} #myCarousel { margin: 50pXx 0 © 0; 

} .carousel-inner .item img { margin: 0 auto; 
} .carousel-control { font-size: 100px; 


} 
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学 习 要 点 : 

1. 首 页 内 容 介 绍 [上 ] 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 轮 播 图 的 下 方 ， 设 计 一 个 内 容 介 绍 ， 内 容 介绍 分 两 部 分 ， 本 次 为 上 半 部 分 
一 :首页 内 容 介 绍 [上 ] 


// 关 于 上 节 课 轮 播 图 ， 手 册 上 其 实 有 一 个 更 好 的 方案 ， 并 不 需要 通过 额外 的 代码 控制 。 


<a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyph 
<a href="#myCarousel" data-slide="next" class="carousel-controlright"> <span class="glyph 





<div class="tab1"> 
<div class="container"> 
<h2 class="tab-h2">『「 为 什么 选择 肚 城 企业 培训 」</h2> 
<p class="tab-p"> 强大 的 师资 力量 ， 完 美的 实战 型 管理 课程 ， 让 您 的 企业 实现 质 的 腾飞 ! </p> 
<div class="row"> 
<div class="col-md-6 col"> 
<div class="media"> 
<div class="media-left media-top"> 
<a href="#"> <img class="media-object" src="img/tab1i-1.png" alt=" 
</div> 
<div class="media-body"> 
<h4 class="media-heading"> 课 程 内 容 </h4> 
<p class="text-muted"> 其 他 : 高 校 不 知名 的 讲师 编写 ， 没 有 任何 实战 价值 的 教材 
<p> 其 他 : 知名 企业 家 、 管 理学 大 师 联 合 编写 的 具有 实现 性 教材 ! </p> 
</div> 
</div> 


</div> 
<div class="col-md-6 col"> 
<div class="media"> 
<div class="media-left media-top"> 
<a href="#"> <img class="media-object" src="img/tab1i-2.png" alt=" 
</div> 
<div class="media-body"> 
<h4 class="media-heading"> 师 资 力量 </h4> 
<p class="text-muted"> 其 他 : 非 欧美 正牌 大 学 毕业 的 、 业 界 没有 知名 度 的 讲师 ! 
<p> 其 他 : 美国 哈佛 、 慎 鲁 等 世界 一 流 高 校 、 享 有 声誉 的 名 牌 专家 ! </p> 
</div> 
</div> 
</div> 
<div class="col-md-6 col"> 
<div class="media"> 
<div class="media-left media-top"> 
<a href="#"> <img class="media-object" src="img/tab1i-3.png" alt=" 
</div> 
<div class="media-body"> 
<h4 class="media-heading"> 课 时 安排 </h4> 
<p class="text-muted"> 其 他 : 无 法 保证 上 课 效率 、 没 有 时 间 表 ， 任 务 无 法 完成 ! 
<p> 其 他 : 保证 正常 的 上 课 效率 、 制 定 一 张 时 间 表 、 当 天 的 任务 当天 完成 ! </p> 
</div> 
</div> 
</div> 
<div class="col-md-6 col"> 
<div class="media"> 
<div class="media-left media-top"> 
<a href="#"> <img class="media-object" src="img/tab1i-4.png" alt=" 
</div> 
<div class="media-body"> 


<h4 class="media-heading"> 服 务 团队 </h4> 

<p class="text-muted"> 其 他 : 社会 招聘 的 、 服 务 水 平 参 差 不 齐 的 普通 员工 ! </F 
<p> 其 他 : 内 部 培养 、 经 受过 良好 高 端 服务 培训 的 高 标准 员工 ! </p> 

</div> 
</div> 
</div> 
</div> 
</div> 
</div> 


SEE 


// 对 应 的 CSS 部 分 





body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaheiUI"， "Microsoft Y 
} .tab-h2 { font-size: 20px; color: #0059B2; text-align: center; letter-spacing: 1px; 

} .tab-p { font-size: 15px; color: #999; text-align: center; letter-spacing: 1px; margin: 
} ,tab1 { margin: 30px 0; color: #666; 

} .tab1 .media-heading { margin: 5px 9 20px 0; 

} ,tab1 .text-muted { color: #999; text-decoration: line-through; 

} .tab1 .media-heading { margin: 5px © 20px 0; 

} ,tab1 .text-muted { color: #999; text-decoration: line-through,; 

} ,tab1 ,col { padding: 20px; 

} 


/* 小 屏幕 (平板 ， 大 于 等 于 768px) */ @media (min-width: 768px) { .tab-h2 { 

font-size: 26px; 

} .tab-p { font-size: 16px; 

}}/* 中 等 屏幕 〈 桌 面 显示 器 ， 大 于 等 于 992px) */ @media (min-width: 992px) { .tab-h2 { 
font-size: 28px; 

} .tab-p { font-size: 17px; 

} }/* 大 屏幕 (大 桌面 显示 器 ， 大 于 等 于 1200px) */ @media (min-width: 1200px) { .tab-h2 { 
font-size: 30px; 

} .tab-p { font-size: 18px; 

}} 


画 人 





第 20 章 项 目 实 战 -- 首 页 内 容 介 绍 [下 ][4] 


学 习 要 点 : 

1. 首 页 内 容 介 绍 [下 ] 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 制作 一 下 首页 内 容 介绍 的 下 半 部 分 。 
一 * 首页 内 容 介 绍 [ 下 ] 


// 先 完成 底部 的 footer 


<footer id="footer" class="text-muted"> 
<div class="container"> 
<p> 企业 培训 | 合作 事宜 | 版 权 投诉 </p> 
<p> 苏 ICP 备 12345678\. © 2009-2016 鞭 城 企 训 网 .Powered by 
Bootstrap. </p> 
</div> 
</footer> 


// 底 部 CSS 


#footer { padding: 20px; text-align: center; background-color: #eee; border-top: 1px soli 





// 两 段 内 容 


<div class="tab2"> 
<div class="container"> 
<div class="row"> 
<div class="col-md-6 col-sm-6 tab2-img"> 


<img src="img/tab2.png" alt="" class="auto 
img-responsive center-block"> 
</div> 


<div class="text col-md-6 col-sm-6 tab2-text"> 
<h3> 强 大 的 学 习 体 系 </h3> 
<p> 经 过 管理 学 大 师 层 层 把 关 、 让 您 的 企业 突飞猛进 。 </p> 
</div> 
</div> 
</div> 
</div> 


<div class="tab3"> 
<div class="container"> 
<div class="row"> 
<div class="col-md-6 col-sm-6"> 


<img src="img/tab3.png" alt="" class="auto 
img-responsive center-block"> 
</div> 


<div class="text col-md-6 col-sm-6"> 
<h3> 完 美的 管理 方式 </h3> 
<p> 最 新 的 管理 培训 方案 ， 让 您 的 企业 赶 超 同行 。 </p> 
</div> 
</div> 
</div> 
</div> 


/ICSS 部 分 


.tab2 { background: #eee; padding: 60px 20px; text-align: center; 
‘tab2 img { width: 40%; height: 40%; 

.tab3 { padding: 40px 0; text-align: center; 

.tab3 img { width: 65%; height: 65%; 

‘text h3 { font-size: 20px; 

‘text p { font-size: 14px; 


|] 


/* 小 屏幕 (平板 ， 大 于 等 于 768px) */ @media (min-width: 768px) { .text h3 { 


font-size: 22px; 

} .text p { font-size: 15px; 

} .tab2-text { float: left; 

} .tab2-img { float: right; 

} }/* 中 等 屏幕 ( 虽 面 显示 器 ， 大 于 等 于 992px) */ @media (min-width: 992px) { .text h3 { 
font-size: 24px; 

} .text p { font-size: 16px; 

} .tab2-text { float: left; 

} .tab2-img { float: right; 

} } /* 大 屏幕 〈( 大 桌面 显示 器 ， 大 于 等 于 1200px) */ @media (min-width: 1200px) { .text h2 { 
font-size: 26px; 

} .text p { font-size: 18px; 

} .tab2-text { float: left; 

} .tab2-img { float: right; 

} 


/JS 控制 重 直 居中 


$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height() 
$(window).resize(function() { 

$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).heig 
}); 


$('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height() 
$(window).resize(function() { 

$('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).heig 
}); 





El: 





第 20 章 项 目 实战 -资讯 内 容 [5,6] 


学 习 要 点 : 

1. 资 讯 内 容 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 制作 一 下 子 栏目 资讯 内 容 。 
一 资讯 内 容 


// 谷 歌 浏览 器 解析 的 顺序 调整 ， 需 要 全 部 加 载 后 执行 


$(window).load(function() { 
$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).heig 


}); 
辣 || 芝 = 


注 : 对 于 Firefox 浏览 器 ， 可 以 按 Ctrl+Shift+M， 调 整 移动 端 尺 寸 。 





// 子 栏目 标题 


<div class="jumbotron"> 
<div class="container"> 
<hgroup> 
<h1> 资 讯 </h1> 
<h4> 企 业内 训 的 最 新 动态 、 资 源 等 . , .</h4> 
</hgroup> 
</div> 
</div> 


// 栏 目 CSS 


.jumbotron { margin: 50px 90 9 0; padding: 60px 0; background: #ccc url(../img/bg.jpg); co 
} .jumbotron hi { font-size: 26px;//768,30; 992,33; 1200,36; 
padding: 0 9 9 20px; 
} .jumbotron h4 { font-size: 16px;//768,16; 992,17; 1200,18 
padding: 0 9 9 20px; 
} 


eC 一 


// 资 讯 内 容 





<div id="information"> 
<div class="container"> 
<div class="row"> 
<div class="col-md-8 info-left"> 
<div class="container-fluid" style="padding:0;"> 
<div class="row info-content"> 
<div class="col-md-5 col-sm-5 col-xs-5"> 
<img src="img/infoi.jpg" class="img-responsive" alt=""> 
</div> 
<div class="col-md-7 col-sm-7 col-xs-7"> 
<h4> 广 电 总 局 发 布 TV0S2.0 华为 阿里 参与 研发 </h4> 
<p class="hidden-xs"> TV0S2.0 是 在 TV0S1.9 与 华为 Media0S 及 阿里 
<p> admin 15 / 10 / 11 </p> 
</div> 
</div> 
</div> 
</div> 
<div class="col-md-4 info-right hidden-xs hidden-sm"> 
<blockquote> 
<h2> 热 门 资讯 </h2> 
</blockquote> 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-5 col-sm-5 col-xs-5" style="margin:12px 0;padd 
<img src="img/info3.jpg" class="img-responsive" alt=""> 


</div> 

<div class="col-md-7 col-sm-7 col-xs-7" style="padding-right:0"> 
<h4> 标 题 </h4> 
<p> admin 15 / 10 / 11 </p> 

</div> 

</div> 
</div> 
</div> 
</div> 
</div> 


ss 


// 资 讯 内 容 CSS 





#information { padding: 40px 0; background: #eee; 
.info-right { background-color: #fff; box-shadow: 2px 2px 3px #ccc; 
,Info-right blockquote { padding: ©0; margin: 0; 
,Info-right h2 { font-size: 20px; padding: 5px; 
.info-right h4 { line-height: 1.6; 
,Info-content { background-color: #fff; box-shadow: 2px 2px 3px #ccc; margin: 0 © 20px 
,Info-content img { margin: 12px 0; 
,Info-content h4 { font-size: 14px;//768,16; 992,18; 1200,20; 
padding: 2px 0 0 9; 
,Info-content p { line-height: 1.6; color: #666; 


OY 


图 





// 对 于 .info-content h4， 在 中 屏 和 大 屏 需 要 保持 一 行 。 


.info-content h4 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 


} 


第 20 章 项 目 实战 -案例 和 关于 [7] 


学 习 要 点 : 

1. 案 例 内 容 

2. 关 于 内 容 

主讲 教师 : 李 炎 恢 

本 节 课 我 们 制作 一 下 子 案 例 栏目 和 关于 栏目 。 
一 . 案例 内 容 


// 案 例 内 容 1-4 个 根据 不 同 显示 比例 展示 


<div class="col-1g-3 col-md-4 col-sm-6 col-xs-12 col"> 
<div class="thumbnail"> 
<img src="img/case1.jpg" alt=""> 
<div class="caption"> 


<h4> 中 国 移动 通信 </h4> 
<p> 参与 了 本 机 构 的 总 裁 管理 培训 课程 ， 学 员 反馈 意见 良好 。 </p> 
</div> 
</div> 
</div> 


/ICSS 部 分 


#case { padding: 40px 0; text-align: center; background-color: #eee; 
} #case h4 { color: #666; 

} #case p { color: #666; line-height: 1.6; 

} #case ,col { margin: 0 0 20px 0; 


} 


二 关于 栏目 


// 左 右 两 栏 即 可 


<div class="row"> 
<div class="col-md-3 hidden-sm hidden-xs"> 
<div class="l1ist-group"> 
<a class="list-group-item" href="#1">1. 机 构 简 介 </a> 
<a class="list-group-item" href="#2">2. 加 入 我 们 </a> 
<a class="list-group-item" href="#3">3. 联 系 方式 </a> 
</div> 
</div> 
<div class="col-md-9 about"> 
<a name="1"></a> 
<h3> 机 构 简介 </h3> 
<p> 王城 企业 培训 有 限 公司 是 一 家 专业 以 智能 化 弱电 工程 为 主 的 高 科技 民营 企业 ， 公 司 自 创 立 以 来 一 直 专 业 致 
<a name="2"></a> 
<h3> 加 入 我 们 </h3> 
<p> 网 络 已 深刻 改变 着 人 们 的 生活 ， 本 地 化 生活 服务 市 场 前 景 巨 大 ， 生 活 半径 团队 坚信 本 地 化 生活 服务 与 互联 
<p> 请 发 送 您 的 简历 到 : hr@xxx.com， 我 们 会 在 第 一 时 间 联 系 您 1 </p> 
<a name="3"></a> 
<h3> 联 系 方式 </h3> 
<p> 地 址 : 江苏 省 盐城 市 亭 湖 区 大 庆 中 路 1234 号 </p> 
<p> 邮编 : 1234567 </p> 
<p> 电话 : 010-88888888 </p> 
<p> 传真 : 910-88666666 </p> 
</div> 
</div> 


回 


/ICSS 部 分 





#about { padding: 40px 1i5px; background-color: #eee; 
} #about .about { background-color: #fff; box-shadow: 2px 2px 3px #ccc; padding-bottom: 2 
} #about h3 { margin: © 0 10px 0; padding: 20px 0; border-bottom: 1px solid #eee; font-si 


了 上 





javaScript 教程 


javascript 快 速 入 门 1--JavaScript 阐 世 今 
生 ,HelloWorld 与 开发 环境 


JavaScript 历 史 


大 概 在 1992 年 ,一 家 称 作 Nombas 的 公司 开始 开发 一 种 叫做 C--(C-minus-minus, 简 称 Cmm) 的 诅 

入 式 脚本 语言 。Cmm 背 后 的 理念 很 简单 : 一 个 足够 强大 可 以 替代 宏 操 作 (macro) 的 脚本 语 
言 ， 同 时 保持 与 C (和 C++) 中 够 的 相似 性 ， 以 便 开发 人 员 能 很 快 学 会 。 这 个 脚本 语言 捆绑 在 
一 个 叫做 CEnvi 的 共享 软件 产品 中 ， 它 首次 向 开发 人 员 展 示 了 这 种 语言 的 威力 。 Nombas 最 终 
把 Cmm 的 名 字 改 成 了 ScripEase。 原 因 是 后 面 的 部 分 (mm) 听 起 来 过 于 “消极 ”， 同 时 字母 
C“ 令 人 害怕 ”。 现 在 ScriptEase 已 经 成 为 了 Nombas 产 品 背 后 的 主要 驱动 力 。 当 Netscape 
Navigator 二 露头 角 时 ，Nombas 开 发 了 个 可 以 具 入 网 页 中 的 CEnvi 的 版 本 。 这 些 早 期 的 试验 
称 为 Espresso Page( 浓 咖啡 般 的 页 面 ) ， 它 们 代表 了 每 个 在 万 维 网 上 使 用 的 客户 端 脚本 语 
言 。 而 Nombas 丝 毫 没 有 料 到 它 的 理念 将 会 成 为 因特网 的 一 块 重 要 基石 。 


当 网 上 冲浪 越 来 越 流 行 时 ， 对 于 开发 客户 端 脚 本 的 需求 也 逐渐 增 大 。 此 时 ， 大 部 分 因特网 用 
户 还 仅仅 通过 28.8kbit/s 的 调制 解 调 器 来 连接 到 网 络 ， 即 便 这 时 网 页 已 经 不 断 地 变 得 更 大 和 更 
复杂 。 而 更 加 加 剧 用户 痛 苦 We 
次 的 往返 交互 。 设 想 一 下 ， 用 户 填 完 一 个 表单 ， 点 击 提交 按钮 ， 等 待 了 30 秒 钟 的 处 理 后 ， 看 
到 的 却 是 一 条 告诉 你 总 记 卉 写 一 个 必要 的 字段 。 那 时 正 处 于 技术 革新 最 前 沿 的 Netscape， 开 
始 认 盟 考虑 一 种 开发 客户 端 脚本 语言 来 解决 简单 的 处 理 问题 。 


当时 工作 于 Netscape 的 Brendan Eich， 开 始 着 手 为 即将 在 1995 年 发 行 的 Netscape Navigator 
2.0 开 发 一 个 称 之 为 LiveScript 的 脚本 语言 ， 当 时 的 目的 是 同时 在 浏览 器 和 服务 器 (本 来 要 叫 它 
LiveWire 的 ) 端 使 用 它 。Netscape 与 Sun 公 司 联手 及 时 完成 LiveScript 实 现 。 就 在 Netscape 
Navigator 2.0 即 将 正式 发 布 前 ，Netscape 将 其 更 名 为 JavaScript， 目 的 是 为 了 利用 Java 这 个 
因特网 时 蓝 词 汇 。Netspace 的 赌注 最 终 得 到 回报 ，JavaScript 从 此 变 成 了 因特网 的 必 备 组 件 。 


因为 JavaScript 1.0 如 此 成 功 ，Netscape 在 Netscape Navigator 3.0 中 发 布 了 1.1 版 。 恰 巧 那 个 
时 候 ， 微 软 决定 进军 浏览 器 ， 发 布 了 IE 3.0 并 搭载 了 一 个 JavaScript 的 克隆 版 ， 叫 做 

JScript (这 样 命 名 是 为 了 避免 与 Netscape 潜 在 的 许可 纠纷 ) 。 微 软 步 入 Web 浏 览 器 领域 的 这 
重要 一 步 虽 然 令 其 声名 狼藉 ， 但 也 成 为 JavaScript 语 言 发 展 过 程 中 的 重要 一 步 。 


在 微软 进入 后 ， 有 3 种 不 同 的 JavaScript 版 本 同时 存在 : Netscape Navigator 3.0 中 的 
JavaScript、IE 中 的 JScript 义 及 CEnvi 中 的 ScriptEase 。 a 言 不 同 的 是 ， 
人 准 来 统一 其 语法 或 特性 ， 而 这 3 种 不 同 的 版 本 恰恰 突出 了 这 个 问题 。 
随 着 业界 担心 的 增加 ， 这 个 语言 标准 化 显然 已 经 势 在 必 行 。 


1997 年 ，JavaScript 1.1 作 为 一 个 草案 提交 给 欧洲 计算 机 制造 商 协会 (ECMA) 。 第 39 技 术 委 
员 会 (TC39) 被 委派 来 "标准 化 一 个 通用 、 跨 平台 、 中 立 于 厂商 的 脚本 语言 的 语法 和 语 

义 ”(http://www.ecma-international.org/memento/TC39.htm) 。 由 来 自 Netscape、Sun、 微 
软 、Borland 和 其 他 一 些 对 脚本 编程 感 兴趣 的 公司 的 程序 员 组 成 的 TC39 锤 炼 出 了 ECMA-262 ， 
该 标准 定义 了 叫做 ECMAScript 的 全 新 脚本 语言 。 


在 接 下 来 的 几 年 里 ， 国 际 标准 化 组 织 及 国际 电工 委员 会 (ISO/IEC ) 也 采纳 ECMAScript 作 为 
标准 (ISO/IEC-16262) 。 从 此 ，Web 浏 览 器 就 开始 努力 (虽然 有 着 不 同 程度 的 成 功 和 失败 ) 
将 ECMAScript 作 为 JavaScript 实 现 的 基础 。 


尽管 ECMAScript 是 一 个 重要 的 标准 ， 但 它 并 不 是 JavaScript 唯 一 的 部 分 ， 当 然 ， 也 不 是 唯一 
被 标准 化 的 部 分 。 实 际 上 ， 一 个 完整 的 JavaScript 实 现 是 由 以 下 3 个 不 同 部 分 组 成 的 


。 核心 (ECMAScript) 一 JavaScript 的 核心 ECMAScript 描 述 了 该 语言 的 语法 和 基本 对 象 
。 文档 对 象 模型 (DOM ) 一 DOM 描 述 了 处 理 网 页 内 容 的 方法 和 接口 
。 浏览 器 对 象 模型 (BOM) 一 -BOM 描 述 了 与 浏览 器 进行 交互 的 方法 和 接口 


ECMAScript、DOM、BOM 将 是 我 们 之 后 课程 的 主要 内 容 。 


JavaScript 与 Java 


尽管 名 字 中 有 Java， 但 是 JavaScript 和 Java 几 乎 没有 什么 共同 点 。Java 是 一 种 全 功能 的 编程 
语言 ， 是 由 Sun 公 司 开发 和 推广 的 。Java 是 C 和 C++ 编程 语言 之 后 的 又 一 种 主流 语言 ， 程 序 员 
可 以 使 用 它 创 建 完整 的 应 用 程序 和 控制 消费 电子 设备 。 与 其 他 语言 不 同 ，Java 宣 称 具 有 跨 平 
台 兼 容 性 ; 也 就 是 说 ， 程 序 员 应 该 能 够 编写 出 可 以 在 所 有 种 类 的 机 器 上 运行 的 Java 程 序 ， 无 
论 机 器 运行 的 是 Windows、Mac OS X 还 是 任何 风格 的 UNIX。 但 实际 上 ，Java 不 总 是 能 够 实 
现 这 个 梦想 ， 因 为 Sun 和 微软 公司 在 这 种 语言 的 发 展 方向 方面 有 很 大 的 分 歧 。 微 软 公司 首先 试 
图 以 自己 的 方式 将 Java 集 成 到 Windows 中 (Sun 认 为， 这 种 方式 使 Java 在 Windows 上 以 一 种 
方式 工作 ， 而 在 其 他 机 器 上 以 另 一 种 方式 工作 ， 从 而 破坏 了 Java 的 跨 平 台 兼 容 性 ) ; 随后 ， 
微软 公司 从 Windows 中 完全 去 除了 Sun 的 Java， 而 创建 了 自己 的 类 Java 语 言 : C#。 经 过 两 公 
司 之 间 的 一 轮 诉讼 之 后 ，Sun 占 据 了 上 风 ， 现 在 可 以 在 Windows (或 Linux) 上 安装 Sun 的 最 
新 Java 版 本 (http://www.java.com/getjava/) 。Mac OS X 操 作 系 统 在 安装 时 会 附带 Java。 


JavaScript 可 以 做 什么 


用 JavaScript 可 以 做 许多 事情 ， 使 网 页 更 具 交 互 性 ， 给 站 点 的 用 户 提供 更 好 、 更 令 人 兴奋 的 体 
验 。JavaScript 使 你 可 以 创建 活跃 的 用 户 界面 ， 当 用 户 在 页 面 间 导 航 时 向 他 们 提供 反馈 。 例 
如 ， 你 可 能 在 一 些 站 点 上 见 过 在 鼠标 指针 停留 时 突出 显示 的 按钮 。 这 是 用 JavaScript 实 现 的 ， 
使 用 了 一 种 称 为 翻转 器 (rollover) 的 技术 可 以 使 用 JavaScript 确 保 用 户 在 表单 中 输入 有 效 的 
信息 ， 这 可 以 节省 你 的 业务 时 间 和 开支 。 如 果 表 单 需要 进行 计算 ， 那 么 可 以 在 用 户 机 器 上 的 
JavaScript 中 完成 ， 而 不 需要 任何 服务 器 端 处 理 。 你 应 该 知道 一 种 区 分 程序 的 方式 : 在 用 户 机 


器 上 运行 的 程序 称 为 客户 端 〈client-side) 程序 ; 在 服务 器 上 和 运行 的 程序 (包括 后 面 要 讨论 的 
CGI) 称 为 服务 器 端 (server-side ) 程序 。 i | 建 定制 
的 HTML 页 面 。 假 设 你 正在 运行 一 个 旅行 指南 站 点 ， 用 户 点 击 夏 威 夷 作为 旅游 目的 地 。 你 可 以 
在 一 个 新 窗口 中 显示 最 新 的 夏威夷 旅游 指南 。JavaScript 可 以 控制 浏览 器 ， 所 以 你 可 以 打开 新 
窗口 、 显 示警 告 框 以 及 在 浏览 器 窗口 的 状态 栏 中 显示 定制 的 消息 。JavaScript 有 一 套 日 期 和 时 
间 特 性 ， 可 以 生成 时 钟 、 日 历 和 时 间 改 文档 。 JavaScript 还 可 以 处 理 表 单 、 设 置 cookie、 即 时 
构建 HTML 页 面 以 及 创建 基于 Web 的 应 用 程序 。 


JavaScript 不 能 做 什么 


JavaScript 是 一 种 客户 端 (client-side ) 语言 ; 也 就 是 说 ， 设 计 它 的 目的 是 在 用 户 的 机 器 上 执 
行 任务 ， 而 不 是 在 服务 器 上 。 因 此 ，JavaScript 有 一 些 固 有 的 限制 ， 这 些 限 制 主要 出 于 安全 原 


1.JavaScript 不 允许 读 写 客 户 机 器 上 的 文件 。 这 是 有 好 处 的 ， 因 为 你 肯定 不 希望 网 页 能 够 

读 取 自 己 硬盘 上 的 文件 ， 或 者 能 够 将 病毒 写 入 硬盘 ， 或 者 能 够 操作 你 计算 机 上 的 文件 。 

唯一 的 例外 是 ， ， 以 写 到 浏览 器 的 cookie 文 件 ， 但 是 也 有 一 些 限制 

。 2.JavaScript 不 允许 写 服 务 器 机 器 上 的 文件 。 尽 管 写 服务 器 上 的 文件 在 许多 方面 是 很 方便 
的 〈 比 如 存储 页 面 点 击 数 或 用 户 填写 的 表单 数据 ) ， 但 是 JavaScript 不 允许 这 么 做 。 相 
反 ， 需 要 用 服务 器 上 的 一 个 程序 处 理 和 存储 这 些 数据 。 这 个 程序 可 以 是 用 Perl 或 PHP 等 语 
言 编 写 的 CGI 或 Java 程 序 。 

。 3.JavaScript 不 能 关闭 不 是 由 它 自己 打开 的 窗口 。 这 是 为 了 避免 一 个 站 点 关闭 其 他 任何 站 
点 的 窗口 ， 从 而 独占 浏览 器 。 

。 4.JavaScript 不 能 从 来 自 四 一 个 让 各 村 的 已 经 打开 的 网 页 中 读 取 信息 。 换 句 话说， 网 页 不 

能 读 取 已 经 打开 的 其 他 窗口 中 的 信息 ， 因 此 无 法 探 察 访问 这 个 站 点 的 冲浪 者 还 在 访问 哪 

些 其 他 站 点 。 


我 们 的 第 一 个 脚本 : 最 经 典 的 HelloWorld 程 序 ! 


<script type="text/javascript"> 
document .write("<h2>Hello, Javascriptworld!</h2>"); 
</script> 


开发 环境 


选择 一 个 你 喜欢 的 纯 文本 编辑 器 或 <abbr title=" 集 成 开发 环境 ">IDE</abbr> 
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NotePad++ 


VIM 


UltraEdit 


EditPlus 

gEdit(Unix) 

Emacs(Mac/Unix) 

其 它 

至 少 一 个 符合 W3C 标 准 的 浏览 器 (推荐 火狐 浏览 器 ) ， 和 一 些 市 场 上 流行 的 浏览 器 (IE) 
FireFox 3.0+ 

Internet Explorer 6.0+ 〈 由 于 IE 具有 多 种 不 同 的 版 本 ， 还 推荐 安装 IETester ) 
Google Chrome 1.0+ 

Opera 9.0+ 

Safari 3.0+ 

调试 工具 

FireFox 下 的 FireBug,Venkman 等 


IE 下 的 IE DeveloperToolbar,MS Script Debugger 等 (强烈 不 推荐 MS Script Debugger, 安 装 之 后 
问题 多 ) 


Google Chrome 的 JS 控 制 台 已 经 很 强大 了 ，Opera 的 错误 控制 台 也 可 以 ，Opera 晴 姓 和 
FireBug 一 样 强大 ，Safari 具 有 和 Chrome 一 样 的 控制 台 


javascript 快 速 入 门 2-- 变 量 ,小 学 生 数 学 与 简单 的 交 
也 


、 
站 了 旦 


又” 时 
对 于 变量 的 理解 : 变量 是 数据 的 代号 。 如 同人 的 名 字 一 样 。 


var num;// 在 JavaScript 中 使 用 关键 字 var 声 明 一 个 变量 


在 JavaScript 中 ,使 用 上 面 的 语法 ,就 可 以 声明 一 个 变量 ,以 便 在 之 后 给 其 指定 值 . 


var num; 
num=128;// 这 样 ， 就 将 num 做 为 值 128 的 一 个 名 字 ， 有 了 名 字 ， 就 可 以 在 之 后 引用 ! 
document .write(num) ;// 输 出 128 


貌似 下 面 的 代码 和 上 面 的 具有 一 样 的 输出 


document .write(128);// 这 样 当 然 也 输出 了 128 


不 过 再 试 试 下 面 的 代码 


document .write(3.14159265358979);// 我 们 要 多 次 输出 这 个 值 
document .write(3,.14159265358979 ) ; 
document .write(3.14159265358978 ) ; 
document .write(3,.14159265358979 ) ; 
document .write(3.14159265358979 ) ; 


于 是 可 以 用 变量 的 概念 来 偷懒 


var num; 
num=3.14159265358979， 
document .write(num); 
document .write(num); 
document .write(num); 
document .write(num); 
document .write(num); 


虽然 看 上 去 没 节约 多 少 笔墨 ， 但 有 一 个 概念 即 是 : 我 们 使 用 document.write 多 次 输出 的 是 同一 
个 值 ! 而 前 面 一 块 则 不 同 ， 它 在 每 次 输出 时 产生 了 一 个 新 的 值 ， 显 而 易 见 ， 使 用 变量 可 以 清 
楚 的 表达 我 们 想 要 做 的 ， 而 且 简 短 的 变量 名 引用 可 以 使 代码 更 清晰 且 不 容易 出 错 ! 当然 ， 名 
字 不 是 乱 取 的 ， 变 量 的 命名 有 一 些 限 制 : 只 能 包含 字母 ， 数 字 ， 和 下 划 线 ， 还 有 个 特殊 的 $ 字 
符 ， 并 且 变 量 名 只 能 以 字母 ， 下 划 线 ， 还 有 $ 开 头 ;另外 ， 还 不 能 使 用 JavaScript 关 键 字 和 保留 
字 ; 所 以 说 ， 下 面 的 变量 声明 全 是 错误 的 


var 34bad;// 不 能 以 数字 开头 
var per 人 ;// 不 能 包含 中 文 
var bad-var;// 非 法 的 - 
var var;//Vvar 就 是 一 个 关键 字 ， 所 以 很 明显 不 能 用 来 做 变量 名 


另外 要 注意 的 一 点 是 ,变量 的 名 称 是 区 分 大 小 写 的 ! 


值 ， 类 型 


Var dog; 
dog=" 小 虎 子 ";// 字 符 串 ， 它 们 总 被 包含 在 双 引 号 (或 单 号 ) 中 
var num; 
num=1;// 数 字 ， 它 们 裸露 的 出 现 了 
var strNum; 
strNum="1";// 但 是 现在 StrNum 所 引用 的 是 一 个 字符 串 ， 因 为 它 被 包含 在 引号 中 了 
var badNum 
badNum=3.345;// 一 个 小 数 ， 因 为 它 带 有 一 个 小 数 点 
badNum=.2;// 仍 然 是 一 个 小 数 ， 这 名 代码 与 badNum=0 .2 是 一 样 的 ! 
badNum = 0.4.5;// 当 然 ， 这 句 代 码 是 错 的 ， 一 个 非法 数字 


上 面 那样 的 写法 (为 了 演示 ) ， 我 已 经 不 想 再 忍受 了 ， 完 全 可 以 这 样 声明 变量 


var dog,num, strNum, badNum;// 可 以 一 次 声明 多 个 变量 ， 它 们 用 去 号 分 隔 , 然后 再 赋值 
dog=" 小 庞 子玉 ; 
num=1， 
当然 还 有 另 一 种 声明 变量 的 方法 ,事实 上 这 种 风格 才 是 最 常见 的 


var dog=" 小 虎 子 "; var num=1; var str="some string",strNum="123"; 


数字 (只 能 有 整数 或 小 数 ) ， 字 符 串 可 能 最 常用 的 了 ， 还 有 另 一 种 类 型 : 布尔 值 (Boolean). 不 
像 数字 或 字符 串 ， 有 无 限 种 可 能 的 值 ，Boolean 值 只 有 两 种 可 能 : 真 ， 假 


var bool=true;// 用 true 表 示 申 值 
bool=false;// 用 false 表 示 假 值 


JavaScript 是 动态 类 型 语言 ， 在 声明 变量 时 无 需 指明 其 类 型 ， 在 运行 时 刻 变量 的 值 可 以 有 不 同 
的 类 型 。 


et 


var s="Hello,World!111";// 无 需 指 明 为 字符 串 类 型 
Ss=1.61803;// 在 运行 时 将 变量 值 指 定 为 另 一 个 类 型 


JavaScript 的 变量 类 型 不 止 字符 串 ， 数 字 ， 布 尔 值 这 三 种 ， 然 而 这 三 种 确 是 最 常用 的 了 。 其 
数据 类 型 (参考 ) 


复合 (引用) 数据 类 型 是 : 


e。 对象 
e 数组 
特殊 数据 类 型 是 : 


e Undefined 


// 事 实 上 ,我 们 接触 的 第 一 个 数据 类 型 是 Undefined, 它 的 含义 是 "未 定义 值 " 
Var a;// 声 明 一 个 变量 ,但 没有 对 其 赋值 
alert(a);// 但 它 仍 然 有 值 的 , 它 的 值 为 undefined 
alert(b);// 但 注意 ,输出 一 个 未 定义 的 变量 将 出 现 错误 ,而 不 是 输出 undefined 


var si="Hello,™"; 
s1=s1i+"World!"; 
alert(s1); 
Sle 
alert(s1); 


// 加 法 十 
// 减 法 - 
// 乘 法 * 
// 除 法 / 
// 自 增 ++ 
/REI 
var a = 12; var b = 30; var c = atb; 
alert(c);// 输 出 42 
c=b-a; 
alert(c);// 输 出 18 
C=C2. 
alert(c);// 输 出 36 
C=C/A2> 
alert(c);// 输 出 18 
C= 2 
C++;// 这 与 C=c+1 ;效果 是 一 样 的 
alert(c);// 输 出 13 
C--;// 这 与 c=C-1 ;效果 是 一 样 的 
alert(c);// 输 出 11 
// 自 增 与 自 减 运算 符 出 现 的 地 方 也 有 讲究 
c=20; 
alert(c+t+);// 输 出 20, 因为 ++ 写 在 变量 后 面 , 这 表示 变量 C 完 成 运算 之 后 ,再 将 其 值 增 1 
alert(c);// 现 在 将 输出 21, 自 减 运算 符 也 与 些 相 似 
// 如 果 只 是 类 似 这 样 的 计算 
C = C+12; // 可 以 这 样 写 
C+= 12;// 这 与 写 c= C+12; 效 果 是 一 样 的 
// 类 似 其 它 的 运算 也 有 简便 的 方法 
C-=3;//c=c-3 
C= A/AC=CLI 
C/A/C CA 








要 注意 的 是 ， 在 JavaScritp 中 ， 连 接 字符 串 时 也 使 用 "十 "号 。 当 字符 串 与 数字 相遇 时 ?一 一 


一 一 


JavaScript 是 弱 类 型 语言 


Var num=23+45 ; 
alert("23+45 等 于 "+num) ;// 表 达 式 从 左 往 右 计算 ， 字 符 串 之 后 的 数字 都 会 当成 字符 串 然 连接 
alert("23+45="+(23+45) ) ;// 使 用 括号 分 隔 


比较 操作 符 :<,>,<=,>=,==,I= 山 比较 操作 符 返 回 布尔 值 
NE 
VD 


// 小 于 或 等 于 <= 

// 大 于 或 等 于 >= 

// 相 等 == 

// 不 相等 != 
alert(2<4);// 返 回 true 
alert(2>4);// 返 回 false 
alert(2<=4);// 返 回 true 
alert(2>=2);// 返 回 true 
alert(2==2);// 返 回 true 
alert(2!=2);// 返 回 true 


表达 式 的 组 合 


alert( (2<4)==(5>3)==(3<=3)==(2>=2)==(2!=2)==(2==2)==true ); 


逻辑 运算 符 用 于 对 布尔 值 进 行 比较 


// && 逻 辑 与 ， 当 两 边 的 值 都 为 true 时 返回 true, 否则 返回 false 
// | 逻辑 或 ， 当 两 边 值 都 为 false 时 返回 false, 否则 返回 true 
// ! 逻辑 非 
alert(true && false);// 输 出 false 
alert(true && true);// 输 出 true 
alert(true || false);// 输 出 true 
alert(false || false);// 输 出 false 
alert(!true);// 输 出 false 


类 型 转换 入 门 


由 于 JavaScript 是 弱 类 型 语言 ,所 以 我 们 完全 可 以 将 字符 串 和 数字 (两 个 不 同类 型 的 变量 ) 进 行 相 
,这 个 我 们 在 前 面 已 经 演示 过 了 .当然 ,不 仅仅 可 以 将 字符 串 和 数字 相 加 ,还 可 以 将 字符 串 与 数 
i 误 | 


var str ="some string here!"; var num = 123; 
alert(str*num);// 将 输出 NaN，, 因为 来 法 运算 笠 只 能 针对 数字 , 所 以 进行 运算 时 计算 机 会 将 字段 囊 转 换 成 数字 
// 而 这 里 的 字符 囊 转 换 成 数字 将 会 是 NaN 
//NaN 是 一 个 特殊 的 值 , 含义 是 "Not A Number"- 不 是 一 个 数字 , 当 将 其 它 值 转换 成 数字 失败 时 会 得 到 这 个 值 
str = 
alert(str*num);// 将 输出 246, 因为 Str 可 以 解析 成 数字 2 





其 它 类 型 转换 


var bool = true; 
alert(bool*1);// 输 出 1 ,布尔 值 true 转 换 成 数字 为 1, 事实 上 将 其 它 值 转换 在 数字 最 简单 的 方法 就 是 将 其 乘 以 1 
bool = false; 
alert(bool*1);// 输 出 0 
alert(bool+"");// 输 出 "flase", 将 其 它 类 型 转换 成 字符 串 的 最 简单 的 方法 就 是 将 其 写 一 个 空 字符 囊 相 连 
alert(123+"");// 数 字 总 .能 转换 成 字符 囊 





var str = "some string"; 
alert(!!str);//true, 因为 非 运算 符 是 针对 布尔 行 运算 的 ,所 以 将 其 它 类 型 转换 成 布尔 值 只 须 将 其 连续 非 两 ; 
str A 


alert(11str);// 输 出 false, 只 有 空 字 符 串 转换 成 布尔 值 时 会 是 false, 非 空 字符 串 转换 成 布尔 值 都 会 返回 true 
var num =0，; 

alert(!!num);//false 

nNum=-123.345; 

alert(!!num); //true, ee de “ 值 都 会 是 true 

// 还 有 一 个 非常 重要 的 是 ， 空 字符 串 转 换 成 数字 将 会 

alert(""*1);// 输 出 0 


1 一 一 | 一 





获取 变量 类 型 typeof 运算 符 


var bool = true; 
alert(typeof bool1);// 输 出 boolean 
var num =123; 
alert(typeof num);// 输 出 number 
var str = "some string here"; 
alert(typeof str);// 输 出 string 
var strNum = "123"，; 
alert(typeof strNum);// 输 出 string 
StrNum *= 1; 
alert(typeof strNum);// 输 出 number 


、 A 
根据 用 户 的 输入 进行 计算 
使 用 window.prompt 可 以 弹出 包含 输入 框 的 窗口 ， 用 户 输 入 的 内 容 将 是 此 函数 的 返回 值 


var msg = window.prompt(" 请 输入 一 个 数字 ", "默认 值 ");//prompt 方 法 包含 一 个 必须 参数 和 一 个 可 选 参 数 。 
// 第 一 个 参数 是 必须 的 ， 将 在 窗口 中 显示 的 文字 ， 第 二 个 参数 是 可 选 的 ， 为 文本 框 的 预 设 值 
alert(msg);// 将 输出 我 们 输入 进去 的 东西 
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请 用 户 输 入 年 龄 ， 我 们 计算 出 他 活 了 多 少 秒 (貌似 无 聊 的 很 啊 ) 


var age=window.prompt(" 请 输入 您 的 年 龄 1","18"); var liveSeconds=age*365*24*3600; 
alert(" 您 已 经 度 过 了 "十 ]iveSeconds 十 " 秒 1")，; 


javascript 快 速 入 门 3-- 分 支 判 断 与 循环 
分 支 结 构 


。 单一 选择 结构 (if) 
。 二 路 选择 台 (if/else) 
e@ 内 联 三 元 运算 符 ?: 


e。 多 路 选择 结构 (switch) 


这 


这 


var condition = true; if (condition) { 
alert(" 我 将 出 现 ! "); 
} 
condition = false; if (condition) { 
alert(" 我 不 会 出 现 1 ")， 
} else { 
alert(" 我 会 出 现 ! "); 
condition ="some string"; if (condition) { 
alert(" 可 以 直接 对 任何 数据 类 型 进行 jf 判断 , 在 判断 时 计算 会 自动 将 其 转换 成 布尔 值 !"); 
} var val = condition?" 当 为 true 时 我 将 被 返回 ":" 当 为 false 时 我 将 被 返回 "， 
alert(val);// 将 输出 " 当 为 true 时 我 将 被 返回 " 


对 于 if..else 语 如， 如 果 要 执行 的 语 多 只 有 一 条 ， 可 以 不 使 用 * {} ”， 但 这 种 写法 并 不 推荐 .但 确 
实 这 样 可 以 简化 代码 : 


var str ="one"; if (str=="one") alert("str 的 值 为 字符 串 'one' !"); else alert("not one"); 


虽然 JavaScript 中 没有 if .… elseif 结构 ,但 可 以 使 用 if...else 的 简写 方式 得 到 


// 为 了 判断 用 户 输入 的 成 绩 的 范围 , 我们 使 用 了 多 重 谋 套 的 jf .， else 语 句 
var num = window.prompt(" 请 输入 XXX 的 成 绩 !","")， 
num *=1;//window.prompt 方 法 始终 只 返回 字符 串 ， 用 这 样 的 方法 将 其 转换 成 数字 
if (isNaN(num) && num) {// 不 能 将 其 它 值 转换 成 数字 时 将 返回 NaN, 可 以 用 内 置 的 iSNaN 判 断 值 是 否 是 NaN 
alert(" 您 输入 的 不 是 一 个 数字 !1")，; 
} else { if (num<=100 && num>=90) { 
alert("Excellent!"); 
} else { if (num =80) { 
alert("Good!"); 
} else { if (num < 80 && num >= 70) { 
alert("So so!"); 
} else { if (num < 70 && num >=60) { 
alert("Be careful !!!"); 
} else { if (num < 60 && num >= 0) { 
alert("Oh, NO!"); 
} else { 
alert("USB!"); 
} 


J 


} 
} // 上 面 的 代码 由 于 用 了 多 重 的 jf., .else 嵌 套 , 显得 非常 的 混乱 ,简化 只 须 将 else 后 的 花 括 号 去 掉 就 行 了 
ER 让 二 多 
if (isNaN(num)) 1{ 
alert(" 您 输入 的 不 是 一 个 数字 !1")，; 
} else if (num<=100 && num>=90) { 
alert("Excellent!"); 
} else if (num =80) { 
alert("Good!"); 
} else if (num < 80 && num >= 70) { 
alert("So so!"); 
} else if (num < 70 && num >=60) { 
alert("Be careful !!!"); 
} else if (num < 60 && num >= 0) { 
alert("Ooh, NO!"); 
} else { 
alert("USB!"); 
} // 看 上 去 清晰 多 了 ,但 要 注意 的 是 , JavaScript 中 没有 elseif 这 样 的 语法 ,所 以 上 的 else if 之 间 是 有 空格 的 


2 有 具 "| 


用 于 进行 多 次 判断 的 switch 语 名 


switch(condition) { //switch 本 来 就 是 跳 转 的 意思 (又 称 为 “开关 ”) ， 所 以 switch 语 句 就 是 判断 情况 ， 跳 到 符 
case 4: 

alert("c 的 值 是 4"); case 3: 
alert("c 的 值 肯 定 大 于 等 于 3"); case 2: 
alert("c 的 值 肯 定 大 于 等 于 2"); case 11: 
alert("c 的 值 肯 定 大 于 等 于 1"); 

}// 可 以 使 用 break 来 只 执行 符合 一 个 条 件 的 语句 

switch(condition) { case 4: 
alert("c 的 值 是 4"); break; case 3: 
alert("c 的 值 是 3"); break; case 2: 
alert("c 的 值 是 2"); break; case 1: 
alert("c 的 值 是 1"); break; 

} var condition="one"; switch(condition) {//switch 不 但 可 以 用 来 判断 数字 ,还 可 以 判断 字符 囊 ， 其 ; 





case "one": 
alert("condition 的 值 是 字符 串 'one' 1"); break; case "three": 
alert("condition 的 值 是 字符 串 'three' !1"); break; case "four": 
alert("condition 的 值 是 字符 串 'four' !"); break; case "five": 


alert("condition 的 值 是 字符 串 'five' !"); break; default:// 当 所 有 情况 都 不 匹配 时 ， 将 执 
alert(" 我 们 要 万 无 一 失 !1condition 什 么 都 不 是 1")， 


“| 一 一 nl: 








循环 


循环 用 来 指明 当 某 些 条 件 保 持 为 丫 时 要 重复 的 动作 。 当 条 件 得 到 满足 时 ， 就 跳出 循环 语句 。 
在 JavScript 中 有 四 种 循环 结构 可 用 。 


由 计数 器 控制 的 循环 (for) 

在 循环 的 开头 测试 表达 式 (while) 
在 循环 的 末尾 测试 表达 式 (do/while) 
e@ 对 对 象 的 每 个 属性 都 进行 操作 (for/in) 


for 语句 指定 了 一 个 计数 器 变量 ， 一 个 测试 条 件 ， 以 及 更 新 该 计数 器 的 操作 。 在 每 次 循环 的 重 
复 之 前 ， 都 将 测试 该 条 件 。 如 果 测 斌 成功， 将 运行 循环 中 的 代码 。 如 果 测 试 不 成 功 ， 不 运行 
循环 中 的 代码 ， 程 序 继续 运行 紧 跟 在 循环 后 的 第 一 行 代码 。 在 执行 该 循环 后 ， 计 算 机 变量 将 
在 下 一 次 循环 之 前 被 更 新 。 


for (var i=0;i<10;i++) {//for 循 环 的 圆 括号 里 面 须 放 三 个 句子 ,分 别 是 1, 初 使 化 计数 器 2. 判 断 条 件 3. 更 新 计 
alert("i 当 前 的 值 为 "+i); 





其 实 for 循 环 语句 完全 可 以 这 样 写 ,下 面 的 代码 和 上 面 的 效果 是 一 样 的 (虽然 没有 必要 ， 但 从 这 
样 的 代码 可 清楚 看 出 for 循 环 如 何 工作 的 ) 


Var i=0;// 循 环 进行 之 前 初始 化 i 
for(;;) {//for 语 名 括号 中 必须 有 三 个 语句 ， 但 可 以 为 空 语句 
if (i<10) {// 当 条 件 为 true 时 才 执 行 代码 
alert("i 当 前 的 值 为 "+i); 
} else {// 当 条 件 为 false 时 就 退出 循环 
break;// 使 用 break 退 出 循环 


一 个 死 循环 最 能 说 明 while 的 工作 方式 了 (但 这 样 的 错误 我 们 绝 不 能 在 实际 编程 中 出 现 ) 


while (true) { 
alert(" 你 关 不 掉 我 的 1");// 这 就 是 网 上 那些 所 谓 的 高 手写 的 “ 关 不 上 的 窗 (周传雄 新 歌 ,力荐 ) "代码 
} 


do..while 循 环 与 while 循 环 不 同 之 处 在 于 它 至 少将 代码 块 中 的 代码 执行 一 次 


do { 
alert ("我 肯定 会 出 现 一 次 的 " ) ; 
} while (false); 


而 对 于 for ... in 循环 ， 我 们 将 在 讲解 数组 和 对 象 时 使 用 


javascript 快 速 入 门 4-- 函 数 与 内 置 对 象 


痊 


函数 (又 称 为 方法 ) 用 于 对 一 大 段 为 了 达到 某 种 目的 的 代码 进行 内 类 ， 以 使 代码 更 具有 条 理 


// 一 段 计算 三 角形 面积 的 代码 
var wide=window.prompt(" 请 输入 三 角形 的 底 边 长 度 1",""); var high=window.prompt(" 请 输入 三 角形 
if (isNaN(area)) {// 判 断 用 户 是 否 输 入 的 是 数字 
alert(" 三 角形 的 面积 为 "tarea); 
} else { 
alert(" 您 的 输入 有 误 1"); 


cE 





如 果 我 们 需要 在 其 它 地 方 使 用 此 功能 ， 那 么 最 简单 的 方法 就 是 Ctrl 十 C 然 后 Ctrl 十 V， 使 用 函数 
可 以 节约 一 些 代码 


function calcAngleArea() { // 使 用 unction 关 键 字 声 明 一 个 函数 ， 接 着 是 函数 的 名 称 ， 函 数 名 称 必 须 符 合 变 生 
// 花 括号 用 来 表示 一 段 代码 块 
var wide=window.prompt(" 请 输入 三 角形 的 底 边 长 度 1",""); var high=window.prompt(" 请 输入 = 
if (isNaN(area)) { 
alert(" 您 的 输入 有 误 1"); 
} else { 
alert(" 三 角形 的 面积 为 "tarea); 





但 是 写 了 这 样 了 个 计算 三 角形 面积 的 函数 之 后 ， 页 面 打 开 时 并 没有 任何 东西 会 出 现 ， 那 是 因 
为 函数 必须 使 用 “函数 名 ( ) dd ， 所 以 我 们 还 需要 再 添加 一 名 
calcAngleArea(); 如 果 要 多 次 进行 这 样 的 计算 ， 只 需 多 次 调用 些 函 数 即 可 !( 事 实 上 ， 看 到 这 样 
的 格式 ， 我 们 发 现 ， 像 alert(),prompt(),isNaN() 这 Wg 数 ， 它 们 是 系统 内 置 的 函数 !) 


// 在 之 前 我 们 已 经 声明 了 计算 三 角形 面积 的 函数 calcAngleArea 
calcAngleAreal( ); 

calcAngleArea( ); 

calcAngleArea( ); // 将 会 进行 三 次 这 样 的 计算 


当然 ， 我 们 可 以 对 其 进行 一 些 改 进 ， 以 使 这 个 函数 更 好 用 


function calcAngleArea(wide,high) {// 具 有 参数 的 函数 ， 参 数 其 实 是 一 些 变量 ， 多 个 参数 用 “，7" 分 隔 
var area=wide*high/2; 
if (isNaN(area)) { 
alert(" 您 的 输入 有 误 1"); 
} else { 
alert(" 三 角形 的 面积 为 "tarea); 
} 


这 样 ， 郊 数 就 具有 伸缩 性 了 ， 我 们 不 必 强 制 用 户 在 prompt 弹 窗 中 输入 内 容 。 我 们 先 测试 一 下 
函数 如 何 执行 


calcAngleArea(12,8);// 传 入 参数 12 和 8， 在 函数 内 部 执行 。 接 着 我 们 就 看 到 了 输出 


同样 ， 有 时 候 我 们 并 不 是 相让 用 户 输入 茶 些 值 ， 也 并 不 想 将 某 些 值 输 给 用 户 。 但 现在 这 个 计 
算 三 角形 面积 的 函数 不 管 我 们 想 如 何 处 理 结果 ， 它 都 只 是 在 弹 窗 中 将 结果 显示 给 用 户 。 这 个 
时 候 就 用 到 了 函数 返回 值 的 功能 


// 在 防 数 内 部 可 以 使 用 return 语 名 将 值 返 回 给 调用 函数 的 上 下 文 
function calcAngleArea(wide,high) { var area=wide*high/2; 
If (isNaN(area) || !area) { return false; 
alert(" 注 意 , 一 个 函数 中 的 return 执 行 之 后 ， 元 数 就 停止 运行 了 ， 所 以 你 不 会 看 到 我 1")， 
} else { return area; 


} var a=calcAngleArea(23,8);// 执 行 函 数 ， 兄 数 的 返回 值 将 会 赋 给 变量 a 
if (a) { 

document .write(a);// 当 函数 有 返回 值 时 ， 我 们 可 以 以 想 要 的 任何 方式 来 输出 ay 而 不 是 预先 定义 好 的 aler 
} 


dd 


这 样 ， 这 个 函数 的 功能 就 是 丨 正 的 无 瑕 紫 的 计算 三 角形 面积 的 函数 了 (尽管 看 上 去 有 些 简 
单 ) ， 我 们 输入 宽 和 高 ， 然 后 函数 将 其 计算 后 将 结果 返回 ， 如 果 只 是 

像 "calcAngleArea(23,8)" 这 样 调用 函数 的 话 ,返回 的 结果 将 会 丢失 ， 所 以 我 们 用 一 个 变量 将 结 
果 保存 了 下 来 。 


兄 数 所 带 来 的 作用 域 问 题 
在 函数 内 部 声明 的 变量 (局 部 变量 ) ， 在 函数 外 部 并 不 能 访问 


function demo() { var a=" 外 面 不 能 访问 我 1 "， 
} //alert(a);// 出 错 ， 没 有 声明 变量 a 
demo( ) ;// 执 行 函数 

alert(a);// 仍 然 出 错 


但 在 函数 外 部 声明 的 变量 (全 局 变量 ) ， 在 函数 内 部 是 可 以 访问 的 


hd 


function demo() { // 在 一 个 脚本 中 ， 使 用 function 关 键 字 声明 的 具有 名 称 的 函数 在 脚本 中 出 现 的 次 序 是 任意 
alert(globalVar); 

} //demo(); // 出 错 ， 执 行 时 变 量 globalVar 还 没有 声明 

var globalVar="Hello!"; 

demo( );// 输 出 Hello! 


将 





置 对 象 Math 与 Date 


Math 对 象 为 我 们 提供 了 很 多 用 于 数学 计算 的 方法 和 一 些 常 量 


alert(Math.PI);// 输 出 nt 
alert(Math.pow(10,3));// 输 出 10 的 3 次 方 
alert(Math.abs(-12));// 输 出 -12 的 绝对 值 

var Num=23.34; 
alert(Math.ceil(num) );// 返 回 大 于 等 于 num 的 最 小 整数 
alert(Math.floor(num) );// 返 回 小 于 等 于 num 的 最 大 整数 。 
alert(Math.round(num) ) ;// 返 回 与 num 最 接近 的 整数 (四 合 五 入 )。 
alert(Math.random() );// 返 回 介 于 9 和 1 之 间 的 伪 随 机 数 。 产 生 的 伪 随 机 数 介 于 9 和 1 之 间 ( 含 9， 不 
Sr OM i 
alert(Math.min(2,3,1));// 返 回 多 个 数值 参数 中 较 小 的 那个 
alert(Math.sqrt(2));// 返 回 一 个 数 的 平方 根 
alert(Math.SQRT2);// 返 回 2 的 平方 根 
alert(Math.SQRT1_2) ;// 返 回 二 分 之 一 的 平方 根 
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Date 对 象 像 一 个 时 光 机 


var d = new Date( ) ; //Date 对 象 需要 创 建 
//Date 对 象 能 够 表示 的 日 期 范围 约 等 于 1970 年 1 月 1 日 前 后 各 285,616 年 。 
alert(d);// 直 接 输 出 这 个 对 象 ， 将 会 得 到 一 个 表示 时 间 的 字 符 事 
// 这 个 对 象 有 一 些 方法 , 可 以 用 来 获取 时 间 的 各 个 部 分 
alert(d.getYear());// 获 取 年 ,2000 年 以 前 返回 年 份 后 两 位 , 2000 年 之 后 的 返回 年 份 的 完整 表达 方式 
alert(d.getFullYear()); // 始 终 运 回 年 份 的 4 位 数 表 达 方 式 
alert(d.getMonth() );// 返 回 月 份 , 注意, 月份 是 从 9 开始 计数 的 ,所 以 1 月 时 将 返 
alert(d.getDate()); // 返 回 今天 几 号 
alert(d.getDay() );// 返 回 今天 星期 几 , 星期 天 是 09, 星期 | 是 1.... 
alert(d,getHours() );// 返 回 小 时 
alert(d.getMinutes() );// 返 回 分 钟 
alert(d,getSeconds() );// 返 回 秒 
alert(d.getMil1liSeconds());// 返 回 毫秒 

alert(d.getTime() ); // 返 回 一 个 整数 值 , 这 个 整数 代表 了 从 1970 年 1 月 1 日 开始 计算 到 Date 对 象 中 的 时 间 之 间 的 毫 
// 日 期 的 范围 大 约 是 1970 年 1 月 1 日 午夜 的 前 后 各 285616 年 , 负数 代表 1970 年 之 前 的 日 期 


IE 


我 们 不 但 能 从 中 获取 时 间 值 ,还 可 以 设置 时 间 值 





var d = new Date(); 
d.setFullYear(1990);// 设 置 年 份 为 1900 
alert(d.getFullYear());// 运 回 1900 
alert(d.getTime() );// 输 出 的 值 是 负 的 ,这 验证 了 上 面 所 说 的 getTime() 返 回 值 


与 那些 getXXX 方 法 对 应 的 设置 时 间 的 函数 仅仅 是 将 get 改 成 set 


var d=new Date(); 
d.setFullYear(2004); 
d.setMonth(11);// 设 置 月 份 为 12 月 ,注意 月 份 是 从 Q 开 始 计数 的 
d.setDate(2); 
d.setHours(6); 
d.setMinutes(12); 
d.setSeconds(12); 
alert(d.getDay());// 输 出 2004 年 12 月 2 日 星期 几 
//SetXXX 这 样 的 方法 有 个 最 大 的 好 处 就 是 如 果 我 们 设置 了 错误 的 值 , 脚本 并 不 会 出 错 , 但 日 期 会 自动 更 正 
d= new Date(); 
d.setYear(2003); 
d.setMonth(1);// 月 份 从 0 开始 计数 
d.setDate(31);//2 月 从 来 不 会 有 31 号 
alert(d);// 输 出 日 期 , 发 现 会 是 3 月 3 号 


运用 Date 对 象 这 个 自动 更 正 的 好 处 ,我 们 可 以 用 它 来 判断 用 户 输入 的 日 期 是 否 是 有 效 的 


// 让 用 户 输入 生日 
var year=window.prompt(" 请 输入 出 生年 份 1","")*1; var month=window.prompt(" 请 输入 出 生 月 份 1"， 
alert(" 您 的 输入 有 误 1"); 
} else { var timeMachine=new Date(); 
timeMachine.setFullYear (year); 
timeMachine.setMonth(month-1);// 记 住 , 月 份 是 从 0 开始 计数 的 
timeMachine.setDate(date); var trueYear = timeMachine.getFullYear(); var trueMonth = tim 


var trueDate = timeMachine.getDate(); if (trueYear != year || trueMonth != month 
alert(" 您 撤 谎 1")， 

} else { 

alert(" 虽 然 这 个 时 光 机 能 知道 输入 的 日 期 是 否 有 效 , 至 于 人 是 不 是 在 那天 生 的 , 它 是 不 能 去 看 一 看 的 1"); 

} 


| 








javascript 快 速 入 门 5-- 数 组 与 对 罗 


数组 
数组 ,实际 上 就 是 将 一 大 堆 相 似 的 数据 有 秩序 的 放 在 格子 箱 中 ,十 分 像 药房 里 的 那些 柜子 . 


| 数据 1 | 数据 2 | 数据 3 | 数据 4 | 数据 5 | 数据 6 | 


用 代码 创建 数组 


- 管 让 


var arr = new Array();//Array 和 Date 一 样 ,也 是 一 个 内 置 对 象 ， 需 要 使 用 new 运 算 符 创建 
arr[9]=" 数 据 1";// 向 数组 中 添加 一 个 元 素 , 数组 中 的 元 素 是 有 编号 的 ,并 且 要 注意 的 是 ， 编号 从 9 开始 
// 上 面 一 行 代码 就 向 数组 中 的 第 一 个 箱 添加 了 一 个 元 素 
arr[1]=" 数 据 2";// 方 括号 用 以 指定 下 标 1 
arr[2]=" 数 据 3"， 
arr[3]=" 数 据 4"， 
arr[5]=" 数 据 6" ; 
arr[4]=" 数 据 5" ; 
alert(arr);// 将 会 输出 "数据 1, 数据 2, 数据 3, 数据 4, 数据 5, 数据 6" ”是 以 逗号 分 隔 的 字符 串 
// 并 且 这 些 字符 串 的 连接 是 按 ( 下 标 ) 顺 序 的 
alert(arr[0]);// 当 然 , 我们 也 可 以 直接 访问 其 中 第 一 个 元 素 
alert(arr[1]);// 第 二 个 
alert(arr.length);// 遇 到 的 第 一 个 数组 对 象 的 属性 , length 属 性 用 以 表示 数组 中 元 素 的 个 数 , 输出 6 


遍历 数组 for 循环 
for (var i=0;i< arr.length;i++) { 
arr[i]+=" ---changed";// 将 数组 中 每 个 元 素 ( 字 符 串 ) 后 面 连 上 一 个 " ---changed" 


alert(arr);// 变 了 


创建 数组 的 其 它 方式 


var arr; 
arr = new Array();// 这 样 创建 了 一 个 空 数组 
alert(arr);// 输 出 为 空 , 因为 没有 元 素 
arr = new Array(3);// 在 申明 时 只 放 一 个 正 整 数 表 示 数 组 的 长 度 
alert(arr.length);// 输 出 3 
alert(arr);// 输 出 两 个 过 号 , 它 里 面 放 了 3 个 空 元 素 
// 申 明 时 指定 了 数组 的 长 度 , 然后 修改 指定 位 置 的 值 
arr[2]="end";// 将 最 后 一 位 修改 为 "end" 

alert(arr); // 并 不 是 在 数组 申明 时 指定 了 长 度 就 不 能 更 改 ,更 改 长 度 很 简单 
arr[8]="super";// 数 组 长 度 将 自动 增长 到 8 
// 记 住 , JavaScript 中 数组 长 度 会 自动 增长 ,并且 length 属 性 会 自动 更 新 
alert(arr.length);// 输 出 9, JavaScript 中 数组 下 标 是 从 9 开始 的 
alert(arr[8]); // 也 可 以 在 创建 数组 时 就 指定 值 
arr = new Array(1,2,3,4,5,6,7,8); 
alert(arr); // 如 果 在 创建 数组 时 只 指定 一 个 值 , 并 且 是 正 整 数 
arr = new Array(6);// 将 得 不 到 预期 效果 ,因为 这 是 在 声明 一 个 长 度 为 6 的 空 数组 
// 需 要 这 样 
arr = new Array(); 
arr[9]=6; // 还 可 以 使 用 数组 字面 量 的 方式 
ars = De 个 站 中 村 力 : 
// 与 下 面 一 名 几乎 是 等 价 的 
arr = new Array(); // 但 更 灵活 和 简便 
arr =[3];// 将 创建 一 个 长 度 为 1， 第 一 个 元 素 为 3 的 数组 
arr 二 [22334756] 77 多 个 部 过 以 这 全 分 蚁 
alert(arr[0]);// 输 出 2, 下 标的 顺序 与 在 中 括号 中 出 现 的 顺序 相关 
// 数 组 中 可 以 混合 存放 字符 串 ， 数 值 , 布尔 值 , , ,， 几 乎 所 以 类 型 的 值 ， 包括 数组 
arr = new Array(1,9,true, "some string",new Array("a",3));// 第 五 个 元 素 放 的 是 一 个 数组 
alert(arr[4]);// 输 出 "a",3 
alert(arr[4][90]);// 输 出 "a" 


数组 的 按 引用 传 值 的 特性 


var arr = [2,3,4] ; Var arr2 =arr;// 这 相当 于 给 arr 取 了 个 别名 
arr2[0]=234; 
alert(arr[0]);// 输 出 234, 因为 arr 与 arr2 是 同一 个 对 象 


向 数组 中 添加 ,删除 元 素 (push,delete) 


var arr = [2,4]; 
arr.push(6);//push 方 法 将 元 素 添加 到 数组 未 尾 
alert(arr.length);// 输 出 3 
arr.push("a", "by 可 以 二 次 添 邵 多 个 元 素 
alert(arr.length);// 输 出 5 
alert(arr[5]);// 输 出 "b" 
alert(arr.push(123));//push 方 法 执行 后 会 返回 数组 的 新 长 度 值 , 输出 6 
// 事 实 上 将 元 素 添加 到 数组 未 尾 的 最 简单 的 方法 是 
arr = [4,5]; 
arr[arr.length]="new element";// 利 用 数组 长 度 自动 增长 的 特性 
alert(arr.length);// 输 出 3 
// 为 了 更 明了 的 明白 push 的 工作 原理 ,我 们 可 以 使 用 一 个 简单 的 自 定义 函数 来 完成 这 项 工作 
function array_push(element,arr) {// 第 一 个 参数 为 要 添加 的 元 素 , 第 二 个 参数 为 该 数组 
arr[arr.length]=element; return arr.length; 
} 


arr = [1,2,3]; 

array_push(345,arr); 

alert(arr.length);// 输 出 4 

alert(array_push("some string",arr));// 输 出 5 
alert(arr); // 删 除 一 个 元 素 

al = 国人 

alert(arr); delete arr[2]; 

alert(arr); 

alert(arr,1length);// 元 素 被 删除 了 ,但 数组 长 度 并 没有 变化 ,因为 这 样 能 使 我 们 使 用 相同 的 下 标 访问 以 前 的 元 素 

// 使 用 delete 与 下 面 的 语句 效果 一 样 

arr = os 

alert(arr); 

arr[2]=undefined;//undefined 是 一 个 值 

alert(arr); 
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join 方 法 ,返回 数组 中 的 所 有 元 素 以 指 的 分 隔 符 间隔 的 字符 囊 


var arr = [2,3,4]; 

alert(arr.join("#")); // 事 实 上 当 我 们 直接 输出 数组 时 , 系统 会 自动 调用 这 样 的 方法 
alert(arr); 

alert(arr.join(","));// 两 名 的 输出 效果 是 一 样 的 


对 象 
对 象 是 一 堆 属 性 的 集合 ,其 实 它 和 数组 是 相通 的 


var obj = new 0bject();// 创 建 一 个 对 象 
obj .property = "value";// 使 用 点 语法 给 对 象 添加 属性 
alert(obj ) ;// 只 会 输出 含糊 的 [object 0bject] 
alert(obj.property);// 申 正 的 数据 全 存储 在 它 的 属性 上 面 


对 象 吗 ? 就 当 和 现实 中 的 对 象 一 样 :一 个 "人 "对 象 


Var person = new Object(); 
person.age = 18,; 
person.weight = "123kg"; 
person.height = "170cm"; 
person.arm = 2;// 两 个 臂膀 
person.leg = 2; 


上 面 创建 的 对 象 ,描述 了 现实 中 的 人 的 一 些 特性 :年 龄 18; 重 量 123kg; 身 高 170cm; 不 是 残疾 (这 
个 是 我 推断 的 ); 其 实数 组 也 能 完成 这 样 的 工作 


var person = new Array(); 


person[0] = 18; 
person[1] = "123kg"; 
person[2] = "170cm"; 
person[3] = 2; 
person[4] = 2; 


但 是 这 样 的 表达 方式 , 没 人 能 看 出 这 是 一 个 "人 "对 象 ,使 用 数字 下 标 没 有 对 象 的 属性 明了 ,代码 难 
于 理解 . 其 实数 组 可 以 使 用 字符 串 下 标的 


var person = new Array(); 
person["age"] = 18;// 注 意 , 中 括号 里 的 下 标 是 一 个 字符 串 ， 所 以 需要 使 用 引号 
person["weight"] = "123kg"; 
person["height"] = "170cm"; 
person["arm" 2 
person["leg"] 2 


我 说 过 了 ,数组 和 对 象 是 相通 的 


var arr = new Array(); var obj = new Object(); 
alert(typeof arr);//object 
alert(typeof obj);//object 


所 以 ,数组 用 字符 串 下 标 ,事实 上 也 是 在 给 其 添加 属性 


var arr =[1,2,3]; 
arr["property"]="some data"; 
alert(arr.property);//"some data" 
// 但 注意 的 是 ,数组 的 1ength 属 性 只 能 报告 具有 数字 下 标的 元 素 的 个 数 
alert(arr.length);//3 


而 对 象 也 可 以 使 用 类 似 语 法 访问 它 的 属性 


var obj = new Object(); 
obj.property = "some data"; 
alert(obj["property"]);//"some data" 
// 当 然 也 可 以 使 用 数字 下 标 
obj[1]=123; 
alert(obj[1]);//123 
alert(obj.property);//"some data" 
alert(obj .length);// 但 与 数组 不 同 的 是 , 它 没有 length 属 性 


与 数组 字面 量 相 对 应 的 ,也 有 对 象 字 面 量 的 声明 方式 


Var obj = { 
a:123, // 这 里 的 a,b 等 同样 是 对 象 的 属性 名 
b:456 // 注 意 , 最 后 没有 去 号 
}; 
alert(obj.a); 
alert(obj,b); // 还 可 以 这 样 写 
obj = { "a":345， // 虽 然 如 果 用 引号 引起 来 就 可 以 使 用 空格 等 不 符合 变量 命名 规范 的 字符 ,但 强烈 不 推荐 
uO 
alert(obj.a);//345 


对 于 数组 ,我 们 可 以 使 用 for 对 其 进行 遍历 ,但 for 循 环 只 能 遍历 具有 数字 下 标的 元 素 


var arr =[1,2,3,4]; 
arr["stringIndex"]="some data";// 这 个 不 会 被 遍历 到 
alert(arr.length);//arr.length 属 性 也 不 报告 包含 此 元 素 
for (var i=0;i< arr.length;i++) { 
alert(arr[i]);//i 只 会 是 数字 ,所 以 不 能 遍历 字符 串 下 标的 元 素 
} 


我 们 之 前 看 到 ,对 数组 使 用 字符 串 下 标 实际 上 是 给 这 个 数组 对 象 添加 属性 ,这 个 时 候 我 们 会 发 现 
对 象 的 属性 还 没有 什么 好 的 方法 列举 出 来 ,for. in.… 循 环 出 现 了 (对 于 研究 对 象 ,for in 循环 太 有 用 
了 ) 


Var obj={ 
age :12， 
height:170 }; for (var i in obj) {//i 将 会 被 列举 为 键 名 ,就 是 所 说 的 字符 串 的 下 标 
alert(it"\n"+obj [i]);/* 将 会 以 类 似 
age 


12 
这 样 的 格式 分 别 输出 它 的 键 名 键 值 对 */ } 


for in 循环 不 但 是 用 来 遍历 对 象 属性 , 它 也 可 以 遍历 出 数组 的 具有 数字 下 标的 元 素 


var arr = [1,2,3,4,5,6]; 
arr["property"]=78;// 会 被 遍历 到 ,因为 它 是 属性 
for (var i in arr) { 
alert(i+" +armr[l)7 


了 解 这 些 之 后 ,我 们 可 以 使 用 它们 来 存储 一 些 数据 :一 个 班 的 学 生 的 成 绩 (该 用 数组 还 是 对 象 呢 ? 
这 确实 是 一 个 问题 ) 


// 该 是 对 象 就 是 对 象 ， 该 是 数组 就 是 数组 
var myClass=[];// 创 建 一 个 数组 , 放置 每 个 学 生 的 信息 , 以 学 生 的 学 号 作为 数组 下 标 
myClass[1]={ "name":"HUXP", "Chinese":60, "English":70, "Math":80, "Grade":"C" }; 
myClass[2]={ "name":" 发 哥 ",， "Chinese":80, "English":80, "Math":80, "Grade":"B" }; 
myClass[3]={ "name":"Per", "Chinese":66, "English":77, "Math":88, "Grade":"B" }; 
myClass[4]={ "name":" 小 虎 子 ",，"Chinese":60, "English":60, "Math":770, "Grade":"C" }; 
myClass[5]={ "name":"DBD", "Chinese":70, "English":70, "Math":70, "Grade":"B" }; 
myClass[6]={ "name":"o", "Chinese":77, "English":77, "Math":80, "Grade":"B" }; 
myClass[7]={ "name":"Me", "Chinese":100, "English":100, "Math":100, "Grade":"A", "Say 
alert(myClass[5].Chinese)// 如 果 有 学 号 ,输出 对 应 学 号 的 学 生 的 语文 成 绩 太 简单 了 
// 更 复杂 的 ,搜索 学 生 姓名 ,返回 他 的 所 有 信息 , 是 使 用 函数 的 时 候 了 
function searchByName(name) { for (var i=1;i< myClass.length;i++) { if (myClass[i].na 


} 
} 
alert(searchByName("o").Math); 
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String 对 象 以 及 一 些 用 于 字符 串 的 方法 和 属性 


创建 String 对 象 





var str = new String(); 
alert(str);// 输 出 空 字符 串 
str = new String("Some string here"); 
alert(str);// 输 出 字符 囊 "some string here" 
// 表 面 上 看 , 这 和 直接 创建 的 字符 串 是 一 样 的 效果 
str = "some string here"; 
alert(str); 





但 由 于 使 用 new String(); 所 以 创建 出 来 的 是 对 象 


var str = new String(); 
alert(typeof str);//object 
// 因 为 是 对 象 , 所 以 自然 有 很 多 属性 和 方法 
// 但 字符 串 本 身 也 存 这 样 的 方法 


有 很 多 用 于 处 理 字符 串 的 方法 以 及 一 些 属性 


。 length 属性 ,返回 字符 串 的 长 度 

e indexOf 方法 ,返回 字符 串 内 第 一 次 出 现 子 字符 串 的 字符 位 置 

e lastlndexOf 方法 ,返回 字符 串 中 子 字 符 串 最 后 出 现 的 位 置 

。 charCodeAt 方法 ,返回 一 个 整数 ， 代 表 指 定位 置 上 字符 的 Unicode 编码 

。 fromCharCode 方法 ,从 一 些 Unicode 字符 值 中 返回 一 个 字符 囊 

。 replace 方法 ,进行 文字 替换 ,返回 替换 后 的 字符 串 的 复制 

。 substr 方法 ,返回 一 个 从 指定 位 置 开始 的 指定 长 度 的 子 字符 串 

。 Substring 方法 ,返回 位 于 String 对 象 中 指定 位 置 的 子 字 符 串 

。 toLowerCase 方法 ,返回 一 个 字符 串 ， 该 字符 串 中 的 字母 被 转换 为 小 写字 母 
。 toUpperCase 方法 ,返回 一 个 字符 串 ， 该 字符 串 中 的 所 有 字母 都 被 转化 为 大 写字 母 
。 split 方法 ,把 字符 串 分 割 为 字符 串 数 组 。 


var Str ="some string here"; 


alert(str 
alert(str 
alert(str 
alert(str 
alert(str 
alert(str 


.length);//16 

,index0f("s"));//0, 字符 囊 的 位 置 从 0 开始 计数 
.indexof ("o"));//1 
.index0f("k"));// 没 有 找到 时 返回 -1 
.lastIndex0f("e"));//15, 从 后 往 前 查找 
.CharCodeAt(0));//115, 小 写 s 的 Unicode 编 码 


alert(String.fromCharCode(65,66,67,68));// 返 回 ABCD, 注意 fromCharCode 是 String 对 象 的 静态 方法 


alert(str. 
alert(str. 
alert(str. 


replace("some", "much"));//"much string here" 
substr(1,2));//uc, 从 下 标 1 开始 向 后 截取 2 个 字符 
substring(1,2));//c, 从 下 标 1 开始 截取 到 下 标 2, 不 包括 结束 位 置 的 字符 


alert(str.toLowerCase( )); 


alert(str. 
alert(str. 


toUpperCase( )); 
split(" "));//some,string,here 
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javascript 快 速 入 门 6--Script 标 签 与 芒 癌 HTML 页 面 


Script 标签 
script 标 签 用 于 在 HTML 页 面 中 族 入 一 些 可 执 的 脚本 


<script> 
//some script goes here 
</script> 


script 标 签 有 三 个 特殊 的 属性 (当然 , 像 id,class 这 样 的 属性 它 也 是 有 的 ,HTML 页 面 中 几乎 每 个 元 
素 都 可 以 有 class,id 属 性 ) 





<script language="JavaScript">//language 属 性 指明 标签 里 包含 的 脚本 所 使 用 的 语言 

// 它 有 三 个 常见 的 取 值 JavaScript,JScript,VBScript 
//some script goes here 

</script> // 对 于 JScript 只 有 IE 能 够 识别 , 其它 浏览 器 会 忽略 这 个 标签 其 里 面 的 内 容 

// 而 对 于 VBScript, 只 有 Windows 上 的 IE 能 够 识别 , 运行 

// 然 而 language 属 性 后 来 在 XHTML 中 被 type 属 性 蔡 代 了 <script type="text/javascript">// 取 值 也 变 了 
//some Script goes here 

</script> 





在 Web 浏 览 器 中 ,我 们 只 会 使 用 JavaScript,type 属 性 设置 为 text/javascript. 事 实 上 ,由 于 
JavaScript 十 分 流行 , 它 几乎 成 了 脚本 的 代名词 ,而 在 Web 浏 览 器 中 ,即使 script 标 签 不 加 任何 属 
性 ,浏览 器 也 会 把 它 当 成 JavaScript 


<script> alert("Hello!"); </script> // 上面 的 那 段 代码 将 会 按 JavaScript 的 方式 运行 
// 即 使 有 IE 中 ,不 加 声明 的 Script 块 也 会 当成 JavaScript 执 行 ,而 不 是 VBScript <script> msgbox "Hello 
</script> // 上 面 的 代码 在 IE 中 也 会 报错 , IE 也 会 将 其 当成 JavaScript 执 行 





以 前 在 HTML 页 面 中 ,一 些 标签 常会 加 一 些 诸如 onclick,onmouseover 这 样 的 属性 ,这 是 一 种 事件 
绑 定 (关于 事件 ,我 们 之 后 会 详细 讲解 的 ,不 要 急 ). 用 于 指定 当 HTML 页 面 某 个 元 素 上 发 生 了 什么 
事 的 时 候 去 执行 的 JavaScript 代 码 (当然 也 可 以 是 其 它 客 户 端 脚本 ) 


<img src=".,./images/stack_heap.jpg"” alLt=" 内 存 堆 栈 " onclick="alert( ' 你 把 我 点 疼 了 1 )" /> 


上 面 的 代码 将 在 HTML 页 面 上 显示 一 个 图 像 , 当 你 用 鼠标 点 击 一 下 时 ,会 出 现 一 个 弹 窗 ,显示 ' 你 把 
我 点 疼 了 lonclick 属 性 的 值 其 实 是 一 段 JavaScript 代 码 ;这 就 是 事件 ,下 面 是 其 它 一 些 简单 的 事 
件 


e onclick , 当 筷 标点 击 一 下 时 执行 一 次 
e onmouseover , 当 饼 标 放 上 去 时 执行 一 次 


e。 onmouseout , 当 和 鼠标 移出 去 时 执行 一 次 

。 onmousedown , 当 筷 标 按 下 时 执行 一 次 

。 onmouseup , 当 和 鼠标 在 上 面 松 开 ( 弹 起 ) 时 执行 一 次 
。 onmousedblclick , 当 和 饼 标 双击 时 执行 一 次 

e onload , 当 对 象 加 载 完成 时 执行 一 次 


以 前 网 上 十 分 流行 的 称 之 为 Rollverlmages( 翻 转 图 像 ) 的 效果 其 实 就 是 组 合 
onmouseover,onmouseout 这 样 的 事件 和 简单 的 JavaScript 代 码 实现 的 


<img src="../images/stack_heap.jpg" alt=" 内 存 堆栈 " onmouseover="this.src='../images/over.j| 
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你 可 能 知道 ,onmouseover 这 类 的 属性 中 的 字符 串 将 会 在 事件 发 生 时 当成 脚本 来 执行 ,但 上 面 的 
那些 代码 看 上 去 十 分 模糊 


// 为 了 便于 查看 ,我 们 将 它们 提取 出 来 放 在 下 面 
this.src="'../images/over.jpg' 
this.src='../images/out.jpg’ 


分 析 上 面 的 代码 ,我 们 发 现 , 这 其 实 是 在 给 一 个 对 象 this 的 属性 src 赋 值 ,但 问题 是 我 们 并 没有 声明 
过 一 个 叫 this 的 对 象 ! 其 实 this 对 象 是 一 个 一 直 存 在 的 一 个 对 象 , 它 不 能 被 声明 (this 是 关键 字 ). 这 
里 ,this 就 是 指 "这 个 ", 指 这 个 标签 ! 对 于 HTML 中 的 元 素 ,JavaScript 会 自动 将 其 解析 成 一 个 对 象 . 
对 于 下 面 的 img 标 签 ,会 解析 成 下 面 一 个 对 象 : 


<img src="../images/stack_heap.jpg" alLt=" 内 存 堆 栈 " onclick="alert('Hello!')" /> // 注 i 
this = { 

src:"../images/stack_heap.jpg", 

alt:" 内 存 堆 栈 "， 

onclick:"alert('Hello!')", 

tagName:"IMG" 


}; 
// 其 实 不 止 这 些 属性 





上 面 ,img 标 签 会 被 解析 成 一 个 对 象 ,具有 src,alt 等 属性 ,src,alt 属 性 是 我 们 写 在 HTML 里 面 的 ,而 
tagName 则 是 系统 自动 生成 的 , 它 表 示 标 签 的 标签 名 ! 我 们 可 以 用 下 面 的 代码 进行 测试 : 


<img src=",./images/stack_heap.jpg" alt=" 内 存 堆 栈 " onclick="alert(this.src);alert(this.ta 


= 计 





自然 ,我 们 也 可 以 修改 它 的 值 ,于 是 翻转 图 象 的 效果 就 这 样 成 功 了 


对 于 这 样 的 行内 事件 绑 定 ,有 一 些 注意 点 . 


<head> 
<script> 
function myFn() { 
alert(" 图 象 加载 完 成 了 !") ; 
} </script> 
MNead> 若干 若干 代码 之 后 <img src="../images/stack_heap.jpg"” alt=" 内 存 堆栈 








上 面 的 代码 执行 是 没 问题 的 ,然而 将 顺序 翻转 一 下 (script 可 以 放 在 任何 合法 的 地 方 ) 


<img src="../images/stack_heap.jpg" alt=" 内 存 堆 栈 " onload="myFn()" />// 当 图 得 加 载 成 功 时 执行 - 
7 若干 若干 代码 之 后 <script> 
function myFn() { 
alert(" 图 象 加载 完 成 了 !" ) ; 
} </script> 


国王 





HTML 页 面 按照 从 上 往 下 的 顺序 加 载 执 行 , 当 图 象 加 载 成 功 后 ,就 去 执行 onload 里 的 内 容 (一 个 自 
定义 函数 ), 但 由 于 script 标 签 在 下 面 若 干 代码 之 后 ,所 以 还 没 被 加 载 , 因 此 会 出 错 "myFn is 
undefined"; 这 就 是 为 什么 要 将 Script 标签 放 在 head 部 分 的 原因 ,因为 head 在 body 前 面 , 当 body 里 
的 元 素 加 载 完成 时 ,head 中 的 Script 肯定 加 载 完 成 了 


但 后 来 有 了 XHTML, 有 了 "三 层 分 离 "W3C 推 出 了 DOM2, 我 们 需要 使 用 另 一 种 方式 绑 定 事件 , 获 
取 HTML 页 面 元 素 . 再 以 上 面 的 图 像 为 例 : 


<head> 
<script> 
var img = document.getElementById("myImg");// 我 们 通过 ID 来 获取 它 
//document .getELementById 方 法 有 个 参数 ， 一 个 字符 串 ID 
// 然 后 ,img 就 表示 了 那个 图 像 标签 对 象 
img.onclick = myFn; /* 我 们 不 是 把 JavaScript 代 码 以 字符 串 符 值 给 它 的 onc1Lick 属 性 
而 是 直接 赋值 给 它 一 个 函数 名 
你 也 会 说 ,为 什么 不 是 img .onclick=myFn(); 
因为 现在 是 在 JavaScript 代 码 区 域 中 
加 " ()" 表 示 执 行 这 个 函数 ， 然 后 将 这 个 函数 的 返回 值 赋 给 了 img.onc1Lick*/ 
function myFn() { 
alert(" 图 象 加载 完 成 了 !") ; 
} </script> 
</head> /ee <img src="../images/stack_heap.jpg"” id="myImg" alt=" 内 存 堆 栈 " /> // 我 


|: 








但 上 面 的 代码 执行 了 仍 会 出 错 ,因为 HTML 从 上 往 下 加 载 , 当 加 载 到 Script 时 ,body 部 分 在 下 面 ,还 
没有 被 加 载 ,而 JavaScript 在 浏览 加 载 到 时 就 会 自动 执行 .这 时 ,页 面 上 的 ID 为 mylmg 的 img 还 没 
被 加 载 到 ,所 以 会 出 错 ;document.getElementByld 方 法 需要 一 个 字符 串 形式 的 ID, 而 如 果 页 面 上 
没有 |D 为 这 个 的 元 素 , 它 则 会 返回 null( 空 对 象 ); 而 在 下 面 一 行 ,img.onclick 这 一 名 使 用 了 一 个 空 
对 象 ,所 以 会 在 这 里 出 错 ! 至 于 解决 方法 ,其 实 只 是 将 传统 的 行内 事件 绑 定 的 Script 位 置 反 过 来 放 . 
将 script 放 在 所 以 HTML 元 素 后 面 ! 


<img src="../images/stack_heap.jpg"” id="myImg"” alt=" 内 存 堆栈 " /> //[....,.,........，.， 站 
var img = document.getElementById("myImg"); // 这 个 时 候 , 由 于 script 标 签 放置 的 位 置 处 在 im 
img.onclick = myFn; function myFn() { 
alert(" 图 象 加 载 完成 了 !" ) ; 
} </script> 


| a 


但 标准 仍然 推荐 将 script 放 在 head 部 分 ! 那 么 ,这 就 要 用 到 另 一 个 事件 onload 








window.onload = initAll;// 将 所 有 代码 写 在 一 个 函数 之 中 ， 然后 注册 到 window 对 象 的 0nload 事 件 属性 上 
//window 表 示 窗 口 对 象 , 只 要 窗口 打开 , 它 就 始终 存在 , 当 页 面 加 载 完 成 后 ,会 触发 window 对 象 上 的 onload 事 件 
function initAll() { var img = document.getElementById("myImg"); 
img.onclick = myFn; function myFn() { 
alert(" 图 象 加载 完 成 了 !" ) ; 
} 


这 样 ,代码 就 不 出 错 了 ,不 管 将 脚本 放 在 什么 位 置 ,initAll 只 有 当 页 面 加 载 完成 后 才 会 被 执行 


访问 HTML 页 面 :<abbr title="HTML 文档 对 象 模 
型 ">HTML DOM</abbr> 


HTML DOM 将 整个 页 面 当 成 一 个 document 对 象 ,HTML 里 的 标签 都 要 通过 document 对 象 来 访 
问 . 而 文档 中 的 每 个 标签 ,又 会 转换 成 一 个 对 象 


<p class="demo" title=" 第 一 个 段落 :DOM 树 " id="p1"> 我 们 用 一 个 p 标 签 来 演示 </p> 


它 又 会 被 转换 成 下 面 这 个 对 象 


// 总 该 记得 对 象 字面 量 语法 吧 

{ 
tagName:"p", 
className:"demo", 


title:" 第 一 个 段落 :DOM 树 "， 
id: DE 
innerHTML: "我们 用 一 个 p 标 签 来 演示 " } // 你 也 许 会 奇怪 ,为 什么 标签 的 class 属 性 会 变 成 对 象 的 classNa 


//class 是 JavaScript 保 留 字 !11 
//tagName 表 示 它 的 标签 名 , 而 innerHTML 表 示 它 里 面 的 HTML 代 码 


本 


浏览 将 HTML 标 签 转换 成 这 样 的 对 象 后 ,在 JavaScript 中 访问 该 标签 的 属性 或 里 面 的 内 容 就 简单 
多 了 ,但 问题 是 如 何 访问 到 这 个 对 象 ! 





// 首 先 要 给 该 标签 加 个 ID, 然后 使 用 document .getElementById 方 法 就 能 够 访问 到 它 了 
window.onload = initAll;// 注 意 , 要 将 所 要 访问 HTML 页 面 的 代码 都 放 在 window 的 0nload 事 件 处 理 上 ! 
function initAll() { var p = document.getElementById("p1"); 
alert(p.className); 
alert(p.tagName); 
alert(p.title); 
alert(p.id); 
alert(p.innerHTML); 


访问 HTML 页 面 就 这 么 简单 ! 获 取 一 个 元 素 之 后 ,不 但 可 以 读 取 它 的 属性 值 ,还 可 以 设置 它 的 属性 
值 ! 


window.onload = initAll; function initAll() { var p = document.getElementById("p1"); 
p.title="Javascript"; 
p.className="load";// 我 们 可 以 更 改 它 的 样式 

} 


二 | 
利用 这 些 ,我 们 已 经 能 做 出 一 些 激动 人 心 的 事 了 ! 


// 一 些 CSS 
.Over { color:red; background:blue; font-size:larger; 
} .out { color:black; background:white; font-size:smaller; 
} .click { color:yellow; background:yellow; font-size:12px; 


} 


//HTML 代 码 <p id="p1" class="out"> 一 大 行文 字 , 它们 都 是 普通 的 文字 !</p> 


//JavaScript 代 码 
window.onload = initAll; function initAll() { var p = document.getElementById("p1"); 
p.onclick=clickFn;// 这 里 的 事件 注册 方式 除了 上 比 行内 注册 方式 少 了 括号 , 其它 的 是 一 样 的 
p.onmouseover = overFn; 
p.onmouseout = outFn,; 
} function clickFn() { this.className="click";// 这 里 , this 也 是 可 用 的 
// 注 意 是 className, 而 不 是 class 
} function overFn() { this.className="over"; 
} function outFn() { this.className="out"; 


} 
二 | 


当然 ,获取 页 面 元 0 ny 面 元 
素 , 顾 名 思 意 , 它 是 通过 HTML 的 标签 来 获取 元 素 的 ,而 不 是 ID. 因为 一 张 HTML 页 面 ,一 个 ID 名 称 

是 唯一 的 ,而 标签 名 则 大 多 数 是 相同 的 ,所 以 ,getElementsByTagName 方 法 只 有 一 个 参数 , 即 一 
个 字符 串 形式 的 标签 名 (tagName), 而 返回 值 则 是 一 个 类 似 数 组 的 HTML 元 素 列表 





window.onload = initAll;// 仍 然 要 写 在 window.onload 事 件 处 理 函 数 中 

function initAll() { var pList = document.getElementsByTagName("P"); // 为 什么 要 用 大 写 的 F 
alert(pList.,length);// 与 数组 相似 ,length 报 告 有 多 少 个 元 素 , 页 面 上 有 多 少 个 p 标 签 ,就 报告 多 少 
alert(pList[0] .innerHTML);// 这 样 来 访问 第 一 个 p 元 素 


4 一 一 








另外 ,对 于 document.getElementsByTagName 方 法 ,还 可 以 传 一 个 "号 作为 参数 ,以 获取 页 面 的 
所 有 元 素 , 类 似 于 CSS 里 面 的 通配符 


window.onload = initAll; function initAll() { 
var allThings = document.body.getElementsByTagName("*"); 
// 可 在 任何 DOM 元 素 上 调用 getElementsByTagName 方 法 ， body 尖峰 此 方法 时 , body 外 的 标签 不 会 获取 到 
alert(allThings.length);// 页 面 上 有 多 少 个 标签 ,就 报告 多 少 ( 包含 DOCTYPE) 
alert(allThings[3] .innerHTML);// 这 样 来 访 间 第 四 个 元 素 
} 


加 "| 





其 它 -jjavascript: 伪 协议 
伪 协 议 不 同 于 因特网 上 所 申 实 存在 的 如 http://,https:1/,ftp://, 而 是 为 关联 应 用 程序 而 使 用 的 . 
如 :tencent://( 关 联 QQ),data:( 用 base64 编 码 来 在 浏览 器 端 输 出 二 进 制 文件 ), 还 有 就 是 javascript: 


我 们 可 以 在 浏览 地 址 栏 里 输入 "javascript:alert(JS!");", 点 转 到 后 会 发 现 ,实际 上 是 把 javascript: 
后 面 的 代码 当 JavaScript 来 执行 ,并 将 结果 值 返回 给 当前 页 面 


类 似 ,我 们 可 以 在 a 标 签 的 href 属 性 中 使 用 javascript 伪 协议 
<a href="javascript:alert('JS!');"></a> // 点 击 这 面 的 链接 ,浏览 器 并 不 会 跳 转 到 任何 页 面 ， 而 是 显示 - 
ee 


但 javascript: 伪 协议 有 个 问题 , 它 会 将 执行 结果 返回 给 当然 的 页 面 





<a _ href="javascript:window.prompt(' 输 入 内 容 将 替换 当前 页 面 1!，' ');">A</a> 


解决 方法 很 简单 
<a href="javascript:window.prompt(' 输 入 内 容 将 替换 当前 页 面 1'，' );undefined;">A</a> // 将 unc 
4 a 


尽管 javascript 伪 协议 提供 了 一 定 的 灵活 性 pa 页 面 中 尽量 不 要 使 用 ! 而 对 于 调试 
JavaScript,javascript 伪 协议 则 显得 十 分 有 用 





javascript 快 速 入 门 7--ECMAScript 语 法 基础 


ECMAScript 的 基础 概念 


熟悉 Java、C 和 Perl 这 些 语言 的 开发 者 会 发 现 ECMAScript 的 语法 很 容易 掌握 ， 因 为 它 借 用 了 
这 些 语言 的 语法 。Java 和 ECMAScript 有 一 些 关键 语法 特性 相同 ， 也 有 一 些 完 全 不 同 。 
ECMAScript 的 基础 概念 如 下 : 


。 区 分 大 小 写 。 与 Java 一 样 ， 变 量 、 函 数 名 、 运 算 符 以 及 其 他 一 切 东 西 都 是 区 分 大 小 写 
的 ， 也 就 是 说 ， 变 量 test 不 同 于 变量 Test 。 

。 交 量 是 弱 类 型 的 。 与 Java 和 C 不 同 ，ECMAScript 中 的 变量 无 特定 的 类 型 ， 定 义 变量 时 只 
用 var 运 算 符 ， 可 以 将 它 初始 化 为 任意 的 值 。 这 样 可 以 随时 改变 变量 所 存 数据 的 类 型 ( 尽 
管 应 该 避免 这 样 做 ,但 作为 Web 开 发 ,这 确实 可 以 提高 效率 ) 。 

。 每 行 结尾 的 分 号 可 有 可 无 。Java、C 和 Perl 都 要 求 每 行 代码 以 分 号 (;) 结束 才 符 合 语法 。 
ECMAScript 则 允许 开发 者 自行 决定 是 否 以 分 号 结束 一 行 代码 。 如 果 没 有 分 号 ， 
ECMAScript 就 把 这 行 代码 的 结尾 看 作 该 语句 的 结尾 (与 Visual Basic 和 VBScript 相 似 ) ， 
前 提 是 这 样 没有 破坏 代码 的 语义 。 最 好 的 代码 编写 习惯 是 总 加 入 分 号 ， 因 为 没有 分 号 ， 
有 些 浏览 器 就 不 能 正确 运行 ! 

。 注释 与 Java、C 和 和 PHP 语言 的 注释 相同 。ECMAScript 借 用 了 这 些 语言 的 注释 语法 。 有 两 
种 类 型 的 注释 一 一 单行 注释 和 多 行 注释 。 单 行 注释 以 双 和 斜 线 (//) 开头 。 多 行 注释 以 单 儿 
线 和 星 号 (/) 开头 ， 以 星 号 加 单 余 线 结尾 (/) 。 

e 括号 表明 代码 块 。 从 Java 中 借鉴 的 另 一 个 概念 是 代码 块 。 代 码 块 表示 一 系列 应 该 按 顺序 
执行 的 语句 ， 这 些 语句 被 封装 在 左 括 号 ({) 和 右 括号 (}) 之 间 。 


一 些 示 例如 下 : 


var txt = "Some string"; 
TXT = "other string";//TXT 无 须 声 明 , 可 以 直接 赋值 
alert(txt==TXT);//false 
var str = "string" // 分 号 可 有 可 无 
var hob = "No";var bob = "Yes";// 使 用 分 号 , 可 以 在 一 行 上 写 多 行 语句 
/* 多 行 注释 
alert(" 注 释 中 的 代码 不 会 被 执行 ") */ 
if (txt=="some string") {// 代 码 块 
alert(true); 
} 


、 
站 了 旦 


又 里 
如 前 所 述 ，ECMAScript 中 的 变量 是 用 var 运 算 符 (variable 的 缩写 ) 加 变量 名 定义 的 ， 例 如 : 


Var test = "Hello!world!"; 


在 这 个 例子 中 ， 声 明了 变量 test， 并 把 它 的 值 初 始 化 为 "HellolWorldl" (字符 串 ) 。 由 于 
ECMAScript 是 弱 类 型 的 ， 所 以 解释 程序 会 为 test 自 动 创建 一 个 字符 囊 值 ， 无 需 明 确 的 类 型 声 
明 。 还 可 以 用 一 个 var 语 句 定义 两 个 或 多 个 变量 : 


var a = "some",b="string" 


前 面 的 代码 定义 了 变量 test， 初 始 值 为 "Some"， 还 定义 了 变量 test2， 初 始 值 为 "string"。 不 过 
用 同一 个 var 语 多 定义 的 变量 不 必 具 有 相同 的 类 型 ， 如 下 所 示 : 


var a=12,b="string"; 


即使 a 和 b 属 于 两 种 不 同 的 数据 类 型 ， 在 ECMAScript 中 这 样 定义 也 是 完全 合法 的 。 与 Java 不 
同 ，ECMAScript 中 的 变量 并 不 一 定 要 初始 化 (它们 是 在 幕后 初始 化 的 ， 将 在 后 面 讨论 这 一 
点 ) 。 因 此 ， 下 面 一 行 代码 也 是 有 效 的 : 


Var a; // 只 声明 


此 外 ， 与 Java 不 同 的 还 有 变量 可 以 存放 不 同类 型 的 值 。 这 是 弱 类 型 变量 的 优势 。 例 如 ， 可 以 
把 变量 初始 化 为 字符 串 类 型 的 值 ， 之 后 把 它 设置 为 数字 值 ， 如 下 所 示 : 


var test = "string",; 
alert(test); //..... 若干 代码 后 
test=123;// 更 改 了 类 型 
alert(test); 


这 段 代码 将 毫 无 问题 地 输出 字符 串 值 和 数字 值 。 但 是 ， 如 前 所 述 ， 使 用 变量 时 ， 好 的 编码 习 
惯 是 始终 存放 相同 类 型 的 值 。 变 量 名 需要 遵守 两 条 简单 的 规则 : 


。 第 一 个 字符 必须 是 字母 、 下 划 线 (_) 或 美国 符号 ($) 
。 余下 的 字符 可 以 是 下 划 线 、 美 国 符号 或 任何 字母 或 数字 字符 。 


下 面 的 变量 名 都 是 合法 的 : 


var a; var $a; var $; var _a; var _; Var a23 


当然 ， 只 是 因为 变量 名 的 语法 正确 并 不 意味 着 就 该 使 用 它们 。 变 量 还 应 遵守 一 条 著名 的 命名 
规则 : 


首 字母 是 小 写 的 ， 接 下 来 的 单词 都 以 大 写字 母 开头 

。 Pascal 标 记 法 首 字 母 是 大 写 的 ， 接 下 来 的 单词 都 以 大 写字 母 开头 

。 向 牙 利 类 型 标记 法 在 以 Pascal 标 记 法 命名 的 变量 前 附加 一 个 小 写字 母 〈 或 小 写字 母 
序列 ) ， 说 明 该 变量 的 类 型 。 例 如 ，i 表 示 整 数 ，s 表 示 字 符 串 


e Camel 标 记 法 











下 面 的 表 列 出 了 用 稳 牙 利 类 型 标记 法 定义 ECMAScript 变 量 使 用 的 前 组 : 


类 型 前 组 示例 
数组 a aValues 
布尔 型 b bFound 
浮 点 型 (数字 ) f fValue 
函数 fn fnMethod 
整 型 (数字 ) i iValue 
对 象 O oType 
正则 表达 式 re rePattern 
字符 囊 s sValue 
变型 (可 以 是 任何 类 型 ) V vValue 

下 面 是 一 些 命名 示例 


Var USerName="CJ";// 驼 峰 命 名 方式 
var UserName="CJ";//Pascal 命 名 方式 
var sUserName="CJ";// 和 鳞 牙 利 命名 方式 


ECMAScript 另 一 个 有 趣 的 方面 (也 是 与 大 多 数 程序 设计 语言 的 主要 区 别 ) 是 在 使 用 变量 之 前 
不 必 声 明 。 例 如 : 


var Str ="Some"， 
otherStr += str+" "+"string"; 
alert(otherstr); 


在 上 面 的 代码 中 ， 变 量 otherStr 并 没有 用 var 运 算 符 定 义 ， 这 里 只 是 插入 了 它 ， 就 像 已 经 声明 

过 它 。ECMAScript 的 解释 程序 遇 到 未 声明 过 的 标识 符 时 ， 用 该 变量 名 创建 一 个 全 局 变量 ， 并 
将 其 初始 化 为 指定 的 值 。 这 是 该 语言 的 便利 之 处 ， 不 过 如 果 不 能 紧密 跟踪 变量 ， 这 样 做 也 很 

危险 。 最 好 的 习惯 是 像 使 用 其 他 程序 设计 语言 一 样 ， 总 是 声明 所 有 变量 。 


关键 宁 


ECMA-262 定 义 了 ECMAScript 支 持 的 一 套 关键 字 (keyword) 。 这 些 关键 字 标识 了 
ECMAScript 语 名 的 开头 和 /或 结尾 。 根 据 规定 ， 关 键 字 是 保留 的 ， 不 能 用 作 变 量 名 或 函数 名 。 
下 面 是 ECMAScript 关 键 字 的 完整 列表 : 


break else new Var 


case finally return void 
catch for switch while 
continue function this with 
default if throw 

delete in try 

do instanceof typeof 


如 果 把 关键 字 用 作 变 量 名 或 函数 名 ， 可 能 得 到 诸如 "ldentifier expected”( 应 该 有 标识 符 ,缺少 
标识 符 ) 这 样 的 错误 消息 。 


保留 字 


保留 字 是 对 于 JavaScript 有 特殊 含义 的 单词 。 因 此 ， 不 能 将 它们 用 作 变 量 名 或 函数 名 。 也 就 是 
说 ， 它 们 可 能 是 JavaScript 未 来 版 本 中 的 命令 。 现 在 就 应 该 避免 使 用 它们 ， 以 免 在 新 版 本 发 布 
时 不 得 不 修改 代码 。 如 果 将 保留 字 用 作 变 量 名 或 函数 名 ， 那 么 除非 将 来 的 浏览 器 实现 了 该 保 
留 字 ， 和 否则 很 可 能 收 不 到 任何 错误 消息 。 当 浏览 器 将 其 实现 后 ， 该 单词 将 被 看 作 关键 字 ， 如 
此 将 出 现 关 键 字 错误 。 


ECMAScript 3 为 以 后 保留 的 单词 : 


abstract final protected 
boolean float public 
byte goto short 
char implements static 
class import super 
const int synchronized 
debugger interface throws 
double long transient 
enum native volatile 
export package extends 
private 


ECMAScript 4 : ECMAScript4 现 在 还 没有 什么 实现 .ECMAScript4 中 ,下 面 的 不 再 是 保留 字 了 ， 
但 也 应 该 尽量 不 要 使 用 它们 


boolean final short byte float static char int double long 


下 面 的 被 加 入 了 保留 字 


as namespace use false true null is 


AL 


javascript 快 速 入 门 8-- 值 ,类 型 与 类 型 转换 


原始 值 和 引用 值 


在 ECMAScript 中 ， 变 量 可 以 存放 两 种 类 型 的 值 ， 即 原始 值 和 引用 值 。 


。 原始 值 (primitive value) 是 存储 在 栈 (stack) 中 的 简单 数据 段 ， 也 就 是 说 ， 它 们 的 值 直 
接 存储 在 变量 访问 的 位 置 。 

e。 引用 值 (reference value) 是 存储 在 堆 (heap) 中 的 对 象 ， 也 就 是 说 ， 存 储 在 变量 处 的 
值 是 一 个 指针 (point) ， 指 向 存储 对 象 的 内 存 处 。 


为 变量 赋值 时 ，ECMAScript 的 解释 程序 必须 判断 该 值 是 原始 类 型 的 ， 还 是 引用 类 型 的 。 要 实 
现 这 一 点 ， 解 释 程序 则 需 尝试 判断 该 值 是 否 为 ECMAScript 的 原始 类 型 之 一 ， 即 Undefined、 
Null、Boolean 和 String 型 。 由 于 这 些 原始 类 型 占据 的 空间 是 固定 的 ， 所 以 可 将 它们 存储 在 较 
小 的 内 存 区 域 栈 中 。 这 样 存储 便于 迅速 查寻 变量 的 值 。 





在 许多 语言 中 ， 字 符 串 都 被 看 作 引 用 类 型 ， 而 非 原 始 类 型 ， 因 为 字符 串 的 长 度 是 可 变 的 。 
ECMAScript 打 破 了 这 一 传统 。 


如 果 一 个 值 是 引用 类 型 的 ， 那 么 它 的 存储 空间 将 从 堆 中 分 配 。 由 于 引用 值 的 大 小 会 改变 ， 所 
以 不 能 把 它 放 在 栈 中 ， 和 否则 会 降低 变量 查寻 的 速度 。 相 反 ， 放 在 变量 的 栈 空间 中 的 值 是 该 对 
象 存储 在 堆 中 的 地 址 。 地 址 的 大 小 是 国定 的 ， 所 以 把 它 存储 在 栈 中 对 变量 性 能 无 任何 负面 影 
响 , 如 图 : 





堆栈 就 像 我 们 的 书 一 样 , 堆 对 应 着 书 的 正文 内 容 ,而 栈 对 应 的 是 书 的 目录 ,音节 标题 是 简短 的 ,所 
以 在 目录 里 面 可 以 放 , 而 文章 的 内 容 则 不 能 放 在 目录 里 ,我 们 只 需要 在 目录 放 一 个 对 应 文章 的 标 
题 和 页 码 .这 样 , 即 可 以 在 一 本 书 中 放大 量 的 内 容 ,又 因为 存在 目录 ,可 以 快速 查找 内 容 


原始 类 型 


如 前 所 述 ，ECMAScript 有 5 种 原始 类 型 (primitive type) ， 即 Undefined、Null、Boolean、 
Number 和 String。ECMA-262 把 术语 类 型 (type) 定义 为 值 的 一 个 集合 ， 每 种 原始 类 型 定义 
了 它 包 含 的 值 的 范围 及 其 字面 量 表示 形式 。ECMAScript 提 供 了 typeof 运 算 符 来 判断 一 个 值 是 
否 在 某 种 类 型 的 范围 内 。 可 以 用 这 种 运算 符 判断 一 个 值 是 否 表 示 一 种 原始 类 型 ; 如 果 它 是 原 
始 类 型 ， 还 可 以 判断 它 表示 哪 种 原始 类 型 。 


typeof 运 算 符 有 一 个 参数 ， 即 要 检查 的 变量 或 值 。 例 如 : 


var Str = "Some thing"; 
alert(typeof str);// 输 出 string 
var num =123,，; 
alert(typeof(num) ) ;// 输 出 number,typeof 运 算 符 可 以 像 函 数 一 样 使 用 
// 这 主要 运用 于 一 些 复杂 的 表达 的 以 解决 优先 级 问题 
alert(typeof num*3);// 输 出 NaN, 因为 typeof 优 先 于 * 
alert(typeof(num*3));// 输 出 number 


对 变量 或 值 调 用 typeof 运 算 符 将 返回 下 列 值 之 一 : 


e "undefined"， 如 果 变 量 是 Undefined 型 的 

e "boolean"， 如 果 变 量 是 Boolean 型 的 

e "number"， 如 果 变 量 是 Number 型 的 

e "string"， 如 果 变 量 是 String 型 的 

e "object"， 如 果 变 量 是 一 种 引用 类 型 或 Null 类 型 的 


你 也 许 会 问 ， 为 什么 typeof 运 算 符 对 于 null 值 会 返回 "object"。 这 实际 上 是 JavaScript 最 初 实 
现 中 的 一 个 错误 ， 然 后 被 ECMAScript 沿 用 了 。 现 在 ，null 被 认为 是 对 象 的 占 位 符 ， 从 而 解释 
了 这 一 矛盾 ， 但 从 技术 上 来 说 ， 它 仍然 是 原始 值 。 


如 前 所 述 ，Undefined 类 型 只 有 一 个 值 ， 即 undefined。 当 声明 的 变量 未 初始 化 时 ， 该 变量 的 
默认 值 是 undefined 


Var a; 
alert(a);// 输 出 undefined 
alert(typeof a);// 输 出 undefined 
alert(a==undefined);//true 


注意 ， 值 undefined 并 不 同 于 未 定义 的 值 。 但 是 ，typeof 运 算 符 并 不 丫 正 
下 面 的 代码 : 


i 
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动 
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EY 
Sk 
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var tmp; 
alert(tmp);//undefined 
alert(typeof tmp);//undefined 
alert(typeof tmp2);//undefined 


前 面 的 代码 对 两 个 变量 输出 的 都 是 "undefined"， 即 使 只 有 变量 tmp2 是 未 定义 的 。 如 果 不 用 
typeof 运 算 符 ， 就 对 tmp2 使 用 其 他 运算 符 ， 这 将 引起 错误 ， 因 为 那些 运算 符 只 能 用 于 已 定义 
的 变量 。 例 如 ， 下 面 的 代码 将 引发 错误 : 


alert(tmp3==undefined);// 出 错 , 因为 变量 tmp3 未 声明 


当 远 数 无 明确 返回 值 时 ， 返 回 的 也 是 值 undefined， 如 下 所 示 : 


function tmp() 位 // 空 函数 ,没有 返回 值 
alert(tmp());//undefined 


另 一 种 只 有 一 个 值 的 类 型 是 Null， 它 只 有 一 个 专用 值 null， 即 它 的 字面 量 。 值 undefined 实 际 上 
是 从 值 null 派 生来 的 ， 因 此 ECMAScript 把 它们 定义 为 相等 的 。 但 它们 并 不 是 严格 相等 的 ,因为 


它们 是 不 同类 型 ! 


alert(null==undefined);// 输 出 true 


尽管 这 两 个 值 相 等 ， 但 它们 的 含义 不 同 。undefined 是 声明 了 变量 但 未 对 其 初始 化 时 赋予 该 变 
量 的 值 ，null 则 用 于 表示 尚未 存在 的 对 象 。 如 果 函 数 或 方法 要 返回 的 是 对 象 ， 那 么 找 不 到 该 对 
象 时 ， 返 回 的 通常 是 null 。 


var obj = document.getElementById("tmp");// 页 面 上 没有 ID 为 tmp 的 元 素 
alert(obj);//null 


Boolean 类 型 是 ECMAScript 中 最 常用 的 类 型 之 一 。 它 有 两 个 值 true 和 false ( 即 两 个 Boolean 字 
面 量 ) 。 即 使 false 不 等 于 0，0 也 可 以 在 必要 时 被 转换 成 false， 这 样 在 Boolean 语 句 中 使 用 两 
者 都 是 安全 的 。 


var bool=true; 
bool=false; 


ECMA-262 中 定义 的 最 特殊 的 类 型 是 Number 型 。 这 种 类 型 既 可 以 表示 32 位 的 整数 ， 还 可 以 表 
示 64 位 的 浮 点 数 。 直 接 输入 的 (而 不 是 从 另 一 个 变量 访问 的 ) 任何 数字 都 被 看 作 Number 型 的 
字面 量 。 例 如 ， 下 面 的 代码 声明 了 存放 整数 值 的 变量 ， 它 的 值 由 字面 量 55 定 义 : 


var num =55 ， 


整数 也 可 以 被 表示 为 八进制 (以 8 为 底 ) 或 十 六 进 制 (以 16 为 底 ) 的 字面 量 。 八 进 制 字 面 量 的 
首 数 字 必 须 是 0， 其 后 的 数字 可 以 是 任何 八进制 数字 (0 到 7) ， 如 下 面 代码 所 示 : 


Var num=020;// 人 和 八进制 10 为 十 进 制 的 16 
alert(num);// 虽 然 我 们 用 八进制 方法 表示 一 个 数 ,但 输出 时 , 系统 会 自动 输出 它 的 十 进 制 表现 形式 


要 创建 十 六 进 制 的 字面 量 ， 首 位 数字 必须 为 0， 其 后 接 字母 X， Re (0 
到 9 和 A 到 F) 。 这 些 字母 可 以 是 大 写 的 ， 也 可 以 是 小 写 的 。 例 如 


var num=0x12;// 十 进 制 18 
num=0xab;//171 
alert(num);// 输 出 的 仍 是 十 进 制 的 171 


注意 ! 尽 管 所 有 整数 都 可 表示 为 八进制 或 十 六 进 制 的 字面 量 ， 但 所 有 数学 运算 返回 的 都 是 十 进 
制 结果 ! 


要 定义 浮 点 值 ， 必 须 包 括 小 数 点 和 小 数 点 后 的 一 位 数字 (例如 ， 用 1.0 而 不 是 1) 。 这 被 看 作 
浮 点 数字 面 量 。 例 如 : 


Var num = 1;// 整 数 
var num2=14.0;// 浮 点 数 


对 于 非常 大 或 非常 小 的 数 ， 可 以 用 科学 记 数 法 表示 浮 点 值 。 采 用 科学 记 数 法 ， 可 以 把 一 个 数 
表示 为 数字 ( 包括 十 进 制 数 字 ) 加 e (或 E) ， 后 面 加 乘 以 10 的 倍数 。 不 明白 ?下 面 是 一 个 示 
例 : 


var num = 3E10 
alert(num);//30000000000 
num=3 .45E2; 
alert(num);//345 


也 可 用 科学 记 数 法 表示 非常 小 的 数 ， 例 如 0.00000000000000003 可 以 表示 为 3-e17 (这 里 ， 
10 被 升 到 -17 次 血 ， 意 味 着 需要 被 10 除 17 次 ) 。ECMAScript 默 认 把 具有 6 个 或 6 个 以 上 前 导 0 的 
浮 点 数 转 换 成 科学 记 数 法 。 


几 个 特殊 值 也 被 定义 为 Number 类 型 的 。 前 两 个 是 Number.MAXVALUE 和 Number.MIN 
VALUE ， 它 们 定义 了 Number 值 集合 的 外 边界 。 所 有 ECMAScript 数 都 必须 在 这 两 个 值 之 间 。 
不 过 计算 生成 的 数值 结果 可 以 不 落 在 这 两 个 数 之 间 。 当 计算 生成 的 数 大 于 

Number.MAX_ VALUE 时 ， 它 将 被 赋予 值 NumberPOSITIVE_INFINITY， 意 味 着 不 再 有 数字 
值 。 同 样 ， 生 成 的 数值 小 于 Number.MIN_VALUE 的 计算 也 会 被 赋予 值 
NumberNEGATIVE_INFINITY， 也 意味 着 不 再 有 数字 值 。 如 果 计 和 莫 返 回 的 是 无 穷 大 值 ， 那 么 
生成 的 结果 不 能 再 用 于 其 他 计算 。 


事实 上 ， 有 专门 的 值 表示 无 穷 大 ， 即 Infinity。Number.POSITIVE_INFINITY 的 值 为 Infinity ， 
NumberNEGATIVE_INFINITY 的 值 为 -Infinity 。 


alert(Number .MAX_VALUE*2 == Infinity);//true 
alert(Number .NEGATIVE_INFINITY == -InNnfinity);//true 


由 于 无 穷 大 数 可 以 是 正 数 也 可 以 是 负数 ， 所 以 可 用 一 个 方法 判断 一 个 数 是 否 是 有 穷 的 (而 不 
是 单独 测试 每 个 无 穷 数 ) 。 可 以 对 任何 数 调用 isFinit() 方 法 ， 以 确保 该 数 不 是 无 穷 大 。 例 如 : 


var a = 9E9999999999999999999999999999999999;// 已 经 超过 范围 了 
If (isFinite(a)) { 
alert(" 一 个 有 穷 数 1"); 
} else { 
alert( 个 万 祁 2)D 
} 


最 后 一 个 特殊 值 是 NaN， 表 示 非 数 (Nota Number) 。NaN 是 个 奇怪 的 特殊 值 。 一 般 说 来 ， 
这 种 情况 发 生 在 类 型 (String、Boolean 等 ) 转换 失败 时 。 例 如 ， 要 把 单词 blue 转 换 成 数值 就 
会 失败 ， 因 为 没有 与 之 等 价 的 数值 。 与 无 穷 大 值 一 样 ，NaN 也 不 能 用 于 算术 计算 。NaN 的 另 
一 个 奇特 之 处 在 于 ， 它 与 自身 不 相等 ， 这 意味 着 下 面 的 代码 将 返回 false : 


alert(NaN); 
alert(!!NaN); 
alert(NaN == NaN); 


出 于 这 种 原因 ， 不 推荐 使 用 NaN 值 本 身 。 了 有 函数 jsSNaN() 会 做 得 相当 好 : 


alert(isNaN(NaN));//true 
alert(isNaN(123));//false 


String 类 型 的 独特 之 处 在 于 ， 它 是 唯一 没有 固定 大 小 的 原始 类 型 。 可 以 用 字符 串 存 储 0 或 更 多 
的 Unicode 字 符 ， 由 16 位 整数 表示 (Unicode 是 一 种 国际 字符 集 ， 本 书后 面 将 讨论 它 ) 。 字 符 
串 中 每 个 字符 都 有 特定 的 位 置 ， 首 字符 从 位 置 0 开始 ， 第 二 个 字符 在 位 置 1， 依 此 类 推 。 这 意 

味 着 字符 串 中 的 最 后 一 个 字符 的 位 置 一 定 是 字符 串 的 长 度 减 1 

字符 囊 字 面 量 是 由 双 引 号 (") 或 单 引号 (') 声明 的 。 与 Java 不 同 的 是 ， 双 引号 用 于 声明 字符 
串 » 单 引 号 用 于 声 明 字 符 o 但 是 9 由 于 ECMAScript 没 有 字符 类 型 所 以 可 使 用 这 两 种 表示 法 
中 的 任何 一 种 。 

String 类 型 还 包括 几 种 字符 字面 量 » Java 、 C 和 Per| 的 开发 者 应 该 对 此 非常 熟悉 。 下 表 列 训 了 

ECMAScript 的 字符 字面 量 : 


3 
起 
hd 
吵 
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\n 换 

\t | 衣 符 

\b 空格 

\r 回 车 

\f 换 页 符 

\ 反 斜 杠 

\ 单 引号 

WW 双 引 号 

Onnn 入 进 制 代码 nnn (n 是 0 到 7 中 的 一 个 八进制 数字 ) 表示 的 字符 
\xnn 十 六 进 制 代码 nn (n 是 0 到 F 中 的 一 个 十 六 进 制 数字 ) 表示 的 字符 


\unnnn 十 六 进 制 代码 nnnn (n 是 0 到 F 中 的 一 个 十 六 进 制 数字 ) 表示 的 Unicode 字 符 


类 型 转换 


Cp 言 最 重要 的 特征 之 一 是 具有 进行 类 型 转换 的 能 力 ，ECMAScript 给 开发 者 提供 
量 简单 的 转换 方法 。 大 多 数 类 型 具有 进行 简单 转换 的 方法 ， 还 有 几 个 全 局 方法 可 以 用 于 
， 。 无论 哪 种 情况 ， 在 ECMAScript 中 ， 类 型 转换 都 是 简短 的 一 步 操 作 。 


ECMAScript 的 Boolean 值 、 数 字 和 字符 串 的 原始 值 的 有 趣 之 处 在 于 它们 是 伪 对 象 ， 这 意味 着 
它们 实际 上 具有 属性 和 方法 。 例 如 ， 要 获得 字符 串 的 长 度 ， 可 以 采用 下 面 的 代码 : 


var Str ="some"; 
alert(str.length); 


尽管 "blue" 是 原始 类 型 的 字符 串 ， 它 仍然 具有 属性 length， 用 于 存放 该 字符 串 的 大 小 。 总 而 言 
之 ，3 种 主要 的 原始 值 Boolean 值 、 数 字 和 字符 串 都 有 toString() 方 法 ， 可 以 把 它们 的 值 转换 成 
字符 串 。 

也 许 你 会 问 ，“ 字 符 串 还 有 toString() 方 法 ， 这 不 是 多 余 的 吗 ? ”是 内 ， 的 确 如 此 ， 不 过 
ECMAScript 定 义 所 有 对 象 都 有 toString() 方 法 ， 无 论 它 是 伪 对 象 ， 还 是 丨 的 对 象 。 因 为 
String 类 型 属于 伪 对 象 ， 所 以 它 一 定 有 toString() 方 法 。 


Boolean 型 的 toString() 方 法 只 是 输出 "true" 或 "false"， 结 果 由 变量 的 值 决 定 : 


Var bool=true; 
alert(bool.toString() )， 


Number 类 型 的 toString() 方 法 比较 特殊 ， 它 有 两 种 模式 ， 即 默认 模式 和 基 模 式 。 采 用 默认 模 
， a 的 字符 串 输 出 数字 值 (无 论 是 整数 、 浮 点 数 还 是 科学 记 数 


var num=10 ， 
alert(num.tosString()); 
num=10.0; 
alert(num,toString());// 仍 然 是 19 


在 默认 模式 中 ， 无 论 最 初 采 用 什么 表示 法 声明 数字 ，Number 类 型 的 toString() 方 法 返 ea 
是 数字 的 十 进 制 表示 。 因 此 ， 以 八进制 或 十 六 进 制 字面 量 形式 声明 的 数字 输出 时 都 是 十 进 
形式 的 。 


采用 Number 类 型 的 toString() 方 法 的 基 模 式 ， 可 以 用 不 同 的 基 输 出 数字 ， 例 如 二 进 制 wl 是 
2， 八 进 制 的 基 是 8， 十 六 进 制 的 基 是 16。 基 只 是 要 转换 成 的 基数 的 另 一 种 叫 法 而 已 ， 
toString() 方 法 的 参数 : 


var num=10 ， 
alert(num.toString());//10 
alert(num.toString(2));//1010 
alert(num.toString(8));//12 
alert(num.toString(16));//A 
// 对 数字 调用 toString(10) 与 调用 toString() 相 同 ， 它 们 返回 的 都 是 该 数字 的 十 进 制 形式 。 
alert(num.toSstring(10)); 


ECMAScript 提 供 了 两 种 把 非 数字 的 原始 值 转换 成 数字 的 方法 ， 即 parselnt() 和 parseFloat()。 
正如 你 可 能 想到 的 ， 前 者 把 值 转换 成 整数 ， 后 者 把 值 转换 成 浮 点 数 。 只 有 对 String 类 型 调用 这 
些 方 法 ， 它 们 才能 正确 运行 ; 对 其 他 类 型 返回 的 都 是 NaN 。 


alert(parseInt("12.23"));//12 
alert(parseFloat("12.45"));//12.45 
alert(parseFloat("12.23.34"));//12.23 
alert(parseFloat("abc"));//NaN 
alert(parseInt(true));//NaN 


在 判断 字符 串 是 否 是 数字 值 前 ，parselnt() 和 parseFloat() 都 会 仔细 分 析 该 字符 串 。parselnt() 

方法 首先 查看 位 置 0 处 的 字符 ， 判 断 它 是 否 是 个 有 效 数字 ; 如 果 不 是 ， 该 方法 将 返回 NaN， 不 
再 继续 执行 其 他 操作 。 但 如 果 该 字符 是 有 效 数 字 ， 该 方法 将 查看 位 置 1 处 的 字符 ， 进 行 同样 的 
测试 。 这 一 过 程 将 持续 到 发 现 非 有 效 数 字 的 字符 为 止 ， 此 时 parselnt() 将 把 该 字符 之 前 的 字符 
串 转 换 成 数字 。 例 如 ， 如 果 要 把 字符 串 "1234blue" 转 换 成 整数 ， 那 么 parselnt() 将 返回 1234， 

因为 当 它 检测 到 字符 b 时 ， 就 会 停止 检测 过 程 。 字 符 串 中 包含 的 数字 字面 量 会 被 正确 转换 为 数 
字 ， 因 此 字符 串 "0xA" 会 被 正确 转换 为 数字 10。 不 过 ， 字 符 串 "22.5" 将 被 转换 成 22， 因 为 对 于 
整数 来 说 ， 人 小数 点 是 无 效 字 符 。 


parselnt() 方 法 还 有 基 模 式 ， 可 以 把 二 进 制 、 八 进 制 、 十 六 进 制 或 其 他 任何 进 制 的 字符 串 转 换 
成 整数 。 基 是 由 parselnt() 方 法 的 第 二 个 参数 指定 的 ， 所 以 要 解析 十 六 进 制 的 值 ， 需 如 下 调用 
parselnt() 方 法 : 


alert(parseInt("AB",16));//171 
alert(parseInt("10",2));//2 
alert(parseInt("10",8));//8 


如 果 十 进 制 数 包含 前 导 0， 那 么 最 好 采用 基数 10 


岗 
该 
A 
ea 
吵 
水 
2 
AP 
Ce 
es 
bay 


1 八进制 的 值 。 例 如 : 


Var str ="010"; 
alert(parseInt(str));//8 
alert(parseInt(str,10));//10 


parseFloat() 没 有 基 模 式 


强制 类 型 转换 


还 可 使 用 强制 类 型 转换 (type casting) 处 理 转换 值 的 类 型 。 使 用 强制 类 型 转换 可 以 访问 特定 
的 值 ， 即 使 它 是 另 一 种 类 型 的 。ECMAScript 中 可 用 的 3 种 强制 类 型 转换 如 下 : 


。 Boolean(value) 一 把 给 定 的 值 转换 成 Boolean 型 
。 Number(value) 一 一 把 给 定 的 值 转换 成 数字 (可 以 是 整数 或 浮 点 数 ) 
。 String(value) 一 一 把 给 定 的 值 转换 成 字符 串 


用 这 三 个 部 数 之 一 转换 值 ， 将 创建 一 个 新 值 ， 存放 由 原始 值 直接 转换 成 的 值 。 这 会 造成 意 想 
不 到 的 后 果 。 


当 要 转换 的 值 是 至 少 有 一 个 字符 的 字符 串 、 非 0 数字 或 对 象 时 ，Boolean() 函 数 将 返回 true。 如 
果 该 值 是 空 字符 串 、 数 字 0、undefined 或 null， 它 将 返回 false。 可 以 用 下 面 的 代码 段 测 试 
Boolean 型 的 强制 类 型 转换 。 


var b1 = Boolean(""); //false - 空 字符 串 
var b2 = Boolean("hello"); //true - 非 空 字符 串 
var bl1 = Boolean(50); //true - 非 零 数字 
var b1 = Boolean(null); //false - null 
var b1 = Boolean(0); //false - 有 零 
var b1 = Boolean(new object()); //true - 对 象 


Number() 元 数 的 强制 类 型 转换 与 parselnt() 和 parseFloat() 方法 的 处 理 方 式 相 似 ， 只 是 它 转 
换 的 是 整个 值 ， 而 不 是 部 分 值 。 


parselnt() 和 parseFloat() 方法 只 转换 第 一 个 无 效 字符 之 前 的 字符 串 ， 因 此 "1.2.3" 将 分 别 被 
转换 为 "1" 和 "1.2"。 用 Number() 进行 强制 类 型 转换 ，"1.2.3" 将 返回 NaN， 因 为 整个 字符 串 
值 不 能 转换 成 数字 。 如 果 字 符 串 值 能 被 完整 地 转换 ，Number() 将 判断 是 调用 parselnt() 方法 
还 是 parseFloat() 方法 。 


下 表 说 明了 对 不 同 的 值 调 用 Number() 方法 会 发 生 的 情况 : 


Number(false) 0 
Number(true) 中 
Number(undefined) NaN 
Number(null) 0 
Number("1.2") 小 之 
Number("12") f 忆 
Number("1.2.3") NaN 
Number(new Object()) NaN 
Number(50) 50 


最 后 一 种 强制 类 型 转换 方法 String() 是 最 简单 的 ， 因 为 它 可 把 任何 值 转换 成 字符 串 。 要 执行 这 
种 强制 类 型 转换 ， 只 需要 调用 作为 参数 传递 进来 的 值 的 toString() 方法 ， 即 把 12 转换 成 
"12"， 把 true 转换 成 "true"， 把 false 转换 成 "false"， 以 此 类 推 。 强 制 转换 成 字符 串 和 调用 
toString() 方法 的 唯一 不 同 之 处 在 于 ， 对 null 和 undefined 值 强制 类 型 转换 可 以 生成 字符 串 而 
不 引发 错误 : 


var S1 = String(null); //"nNnull" 
var oNull = null; var s2 = oNull.toString(); // 会 引发 错误 


在 处 理 ECMAScript 这 样 的 弱 类 型 语言 时 ， 强 制 类 型 转换 非常 有 用 ， 不 过 应 该 确保 使 用 值 的 
正确 。 


javascript 快 速 入 门 9-- 引 用 类 型 


引用 类 型 通常 叫做 类 (class) ， 也 就 是 说 ， 遇 到 引用 值 ， 所 处 理 的 就 是 对 象 。 


注意 : 从 传统 意义 上 来 说 ，ECMAScript 并 不 丨 正 具有 类 。 事 实 上 ， 除 了 说 明 不 存在 类 ， 在 
ECMA-262 中 根本 没有 出 现 “ 类 ”这 个 词 。ECMAScript 定义 了 “对 象 定义 ”， 逻辑 上 等 价 于 其 
他 程序 设计 语言 中 的 类 


Object 


对 象 是 由 new 运算 符 加 上 要 实例 化 的 对 象 的 名 字 创 建 的 。 例 如 ， 下 面 的 代码 创建 Object 对 象 
的 实例 : 


var obj = new Object(); 


这 种 语法 与 Java 语言 的 相似 ， 不 过 当 有 不 止 一 个 参数 时 ，ECMAScript 要 求 使 用 括号 。 如 果 
没有 参数 > 如 以 下 代码 所 示 9 括号 可 以 省 略 : 


var 0 = new Object; 


注意 : 尽管 括号 不 是 必需 的 ， 但 是 为 了 避免 混乱 ， 最 好 使 用 括号 。 


Object 对 象 自身 用 处 不 大 ， 不 过 在 了 解 其 他 类 之 前 ， 还 是 应 该 了 解 它 。 因 为 ECMAScript 中 
的 Object 对 象 与 Java 中 的 java.lang.object 相似 ，ECMAScript 中 的 所 有 对 象 都 由 这 个 对 象 
继承 而 来 ，Object 对 象 中 的 所 有 属性 和 方法 都 会 出 现在 其 他 对 象 中 ， 所 以 理解 了 Object 对 
象 ， 就 可 以 更 好 地 理解 其 他 对 象 。 


Object 对 象 具有 下 列 属性 

constructor 

对 创建 对 象 的 函数 的 引用 (指针 ) 。 对 于 Object 对 象 ， 该 指针 指向 原始 的 Object() 函数 。 
prototype 

对 该 对 象 的 对 象 原型 的 引用 。 对 于 所 有 的 对 象 ， 它 默认 返回 Object 对 象 的 一 个 实例 。 
Object 对 象 还 具有 几 个 方法 : 

hasOwnProperty(property) 


判断 对 象 是否 有 某 个 特定 的 属性 。 必 须 用 字符 串 指 定 该 属性 。 (例如 
0.hasOwnProperty("name")) 


isPrototypeOf(object) 

判断 该 对 象 是 否 为 另 一 个 对 象 的 原型 。 
propertylsEnumerable(property) 

判断 给 定 的 属性 是 否 可 以 用 for...in 语句 进行 枚 举 。 
toString() 


返回 对 象 的 原始 字符 串 表 示 。 对 于 Object 对 象 ，ECMA-262 没有 定义 这 个 值 ， 所 以 不 同 的 
ECMAScript 实现 具有 不 同 的 值 。 


valueOf() 
返回 最 适合 该 对 象 的 原始 值 。 对 于 许多 对 象 ， 该 方法 返回 的 值 都 与 ToString() 的 返回 值 相 同 。 
注意 : 上 面 列 出 的 每 种 属性 和 方法 都 会 被 其 他 对 象 履 盖 。 


Boolean 


Boolean 对 象 是 Boolean 原始 类 型 的 引用 类 型 。 要 创建 Boolean 对 和 象 ， 只 需要 传递 Boolean 
值 作 为 参数 : 


Var oBooleanObject = new Boolean(true); 


Boolean 对 象 将 覆盖 Object 对 象 的 ValueOf() 方法 ， 返 回 原始 值 ， 即 true 和 false。 
ToString() 方法 也 会 被 和 覆盖， 返回 字符 囊 "true" 或 "false"。 遗 憾 的 是 ， 在 ECMAScript 中 很 少 
使 用 Boolean 对 象 ， 即 使 使 用 ， 也 不 易 理 解 。 问 题 通常 出 现在 Boolean 表达 式 中 使 用 
Boolean 对 象 时 。 例 如 


Var oFalseObject = new Boolean(false); var bResult = oFalseObject && true; // 输 出 true 
二 | 


在 这 段 代码 中 ， 用 false 值 创 建 Boolean 对 象 。 然 后 用 这 个 值 与 原始 值 true 进行 AND 操作 。 
在 Boolean 运算 中 ，false 和 true 进行 AND 操作 的 结果 是 false。 不 过 ， 在 这 行 代码 中 ， 计 
算 的 是 oFalseObject， 而 不 是 它 的 值 false。 正 如 前 面 讨 论 过 的 ， 在 Boolean 表达 式 中 ， 所 有 
对 象 都 会 被 自动 转换 为 true， 所 以 oFalseObject 的 值 是 true。 然 后 true 再 与 true 进行 AND 
操作 ， 结 果 为 true。 


注意 : 虽然 你 应 该 了 解 Boolean 对 象 的 可 用 性 ， 不 过 最 好 还 是 使 用 Boolean 原始 值 ， 避免 
发 生 这 一 节 提 到 的 问题 。 


Number 


Number 对 象 是 Number 原始 类 型 的 引用 类 型 。 要 创建 Number 对 象 ， 采 用 下 列 代码 : 


var ONumberobject = new Number(68); 


Number.MAX_VALUE,Number.MIN_VALUE 等 特殊 值 都 是 Number 对 象 的 静态 属性 。 


要 得 到 数字 对 象 的 Number 原始 值 ， 只 需要 使 用 valueOf() 方法 : 


var iNumber = ONumberobject.valueof() 


当然 ，Number 类 也 有 toString() 方法 .除了 从 Object 对 象 继 承 的 标准 方法 外 ，Number 对 象 
还 有 几 个 处 理 数值 的 专用 方法 : 


toFixed() 方法 返回 的 是 具有 指定 位 数 小 数 的 数字 的 字符 串 表 示 。 例 如 : 


var ONumberobject = new Number(68); 
alert(ONumberobject.toFixed(2)); // 输 出 "68.00" 


在 这 里 ，toFixed() 方法 的 参数 是 2， 说 明 应 该 显示 两 位 小 数 。 该 方法 返回 "68.00"， 空 的 字符 
串 位 由 0 来 补充 。 对 于 处 理 货币 的 应 用 程序 ， 该 方法 非常 有 用 。toFixed() 方法 能 表示 具有 0 
到 20 位 小 数 的 数字 ， 超 过 这 个 范围 的 值 会 引发 错误 。 


与 格式 化 数字 相关 的 另 一 个 方法 是 toExponential()， 它 返回 的 是 用 科学 计数 法 表示 的 数字 的 
字符 囊 形式 。 与 toFixed() 方法 相似 ，toExponential() 方法 也 有 一 个 参数 ， 指 定 要 输出 的 小 数 
的 位 数 。 例 如 : 


var ONumberobject = new Number(68); 
alert(oNumberOobject.toExponential(1)); // 输 出 "6.8e+1" 


这 段 代码 的 结果 是 "6.8e+1"， 前 面 解释 过 ， 它 表示 6.8x101。 问题 是 ， 如 果 不 知 道 要 用 哪 种 形 
式 (预定 形式 或 指数 形式 ) 表示 数字 怎么 办 ? 可 以 用 toPrecision() 方法 。 


toPrecision() 方法 根据 最 有 意义 的 形式 来 返回 数字 的 预定 形式 或 指数 形式 。 它 有 一 个 参数 ， 即 
用 于 表示 数 的 数字 总 数 (不 包括 指数 ) 。 例 如 : 


var oNumberObject = new Number(68); 
alert(oNumberOobject.toPrecision(2)); // 输 出 "68" 


当然 ， 输 出 的 是 "68"， 因 为 这 正 是 该 数 的 准确 表示 。 不 过 ， 如 果 指 定 的 位 数 多 于 需要 的 位 数 
又 如 何 呢 ? 


var ONumberobject = new Number(68); 
alert(ONumberobject.toPrecision(3)); // 输 出 "68.0" 


在 这 种 情况 下 ，toPrecision(3) 等 价 于 toFixed(1)， 输 出 的 是 "68.0"。toFixed()、 
toExponential() 和 toPrecision() 方法 都 会 进行 舍 入 操作 ， 以 便 用 正确 的 小 数位 数 正确 地 表示 
一 个 数 。 


String 
String 对 象 是 String 原始 类 型 的 对 象 表 示 法 ， 它 是 以 下 方式 创建 的 : 


var oStringobject = new String("hello world"); 


String 对 象 的 valueOf() 方法 和 toString() 方法 都 会 返回 String 类 型 的 原始 值 : 


alert(oStringobject.valueof() == oStringObject.toString()); // 输 出 "true" 


String 对 象 具 有 属性 length ， 字符 串 中 的 字符 个 数 : 


var oStringobject = new String("hello world"); 
alert(oStringobject.length); // 输 出 "11" 


注意 ， 即 使 字符 串 包 含 双 字 节 的 字符 (与 ASCIl 字符 相对 ，ASCII 字符 只 占用 一 个 字 节 ) ， 


每 个 字符 也 只 草 一 个 字符 。 
String 对 象 还 拥有 大 量 的 方法 。 


localeCompare() 方法 ,对 字符 串 进 行 排序 。 该 方法 有 一 个 参数 - 要 进行 比较 的 字符 串 ， 返 回 的 
是 下 列 三 个 值 之 一 : 


。 如 果 String 对 象 按照 字母 顺序 排 在 参数 中 的 字符 串 之 前 ， 返 回 负数 。 
。 如 果 String 对 象 等 于 参数 中 的 字符 串 ， 返 回 0 
。 如 果 String 对 象 按 照 字母 顺序 排 在 参数 中 的 字符 串 之 后 ， 返 回 正 数 。 


如 果 返 回 负数 ， 那 么 最 常见 的 是 -1， 不 过 站 正 返回 的 是 由 实现 决定 的 。 如 果 返 回 正 数 ， 那 么 
同样 的 ， 最 常见 的 是 1， 不 过 站 正 返回 的 是 由 实现 决定 的 。 而 且 对 于 中 文字 符 ,虽然 表面 上 看 
是 按 拼 音 排序 的 ,但 并 不 一 定 ! 事 实 上 ,它们 按 Unicode 编 码 排序 ,小 的 排 在 前 面 ,大 的 排 在 后 面 


示例 如 下 : 
var oStringobject = new String("yellow"); 
alert(oStringObject.localeCompare("brick")); // 输 出 "1" 
alert(oStringObject.1localeCompare("yellow")); // 输 出 "0" 
alert(oStringobject.1localeCompare("z00")); // 输 出 "-1" 


再 强调 一 次 ， 由 于 返回 的 值 是 由 实现 决定 的 ， 所 以 最 好 以 下 面 的 方式 调用 localeCompare() 
方法 : 


var oStringobject1 = new String("yellow"); var oStringobject2 = new String("brick"); var 
alert(oStringobject2 + " 排 在 字符 串 " + oString0bject1 +" 后 面 "); 
} else if (iResult > 0) { 
alert(oStringobject2 + " 排 在 字符 串 " + oStringobject1+" 前 面 " ) ; 
} else { 
alert(" 两 个 字符 囊 排 序 是 一 样 的 1")， 
} 








localeCompare() 方法 的 独特 之 处 在 于 ， 实 现 所 处 的 区 域 (locale， 兼 指 国 家 /地 区 和 语言 ) 确 
切 说 明了 这 种 方法 运行 的 方式 。 在 美国 ， 美 语 是 ECMAScript 实现 的 标准 语言 ， 
localeCompare() 是 区 分 大 小 写 的 ， 大 写字 母 在 字母 顺序 上 排 在 小 写字 母 之 后 。 不 过 ， 在 其 他 
区 域 ， 情 况 可 能 并 非 如 此 。 


ECMAScript 提供 了 两 种 方法 从 子囊 创建 字符 串 值 ， 即 slice() 和 substring()。 这 两 种 方法 返 
回 的 都 是 要 处 理 的 字符 串 的 子囊 ， 都 接受 一 个 或 两 个 参数 。 第 一 个 参数 是 要 获取 的 子 串 的 起 
始 位 置 ， 第 二 个 参数 (如 果 使 用 的 话 ) 是 要 获取 子囊 终止 前 的 位 置 (也 就 是 说 ， 获 取 终 止 位 
置 处 的 字符 不 包括 在 返回 的 值 内 ) 。 如 果 省 略 第 二 个 参数 ， 终 止 位 就 默认 为 字符 串 的 长 度 。 
slice() 和 substring() 方法 都 不 改变 String 对 象 自身 的 值 。 它 们 只 返回 原始 的 String 值 ， 保 持 
String 对 象 不 变 。 


var oStringObject = new String("hello world"); 


alert(oStringObject.slice(3)); // 输 出 "10 world" 
alert(oStringObject.substring(3)); // 输 出 "lo world" 
alert(oStringObject.slice(3, 7)); // 输 出 "1o w" 


alert(oStringObject.substring(3, 7)); // 输 出 "lo w" 


为 什么 有 两 个 功能 完全 相同 的 方法 呢 ? 事实 上 ， 这 两 个 方法 并 不 完全 相同 ， 不 过 只 在 参数 为 
负数 时 ， 它 们 处 理 参数 的 方式 才 稍 有 不 同 。 对 于 负数 参数 ，slice() 方法 会 用 字符 串 的 长 度 加 
上 参数 ，substring() 方法 则 将 其 作为 0 处 理 (也 就 是 说 将 忽略 它 ) 。 例 如 : 


var oStringObject = new String("hello world"); 


alert(oStringobject.slLlice(-3)); // 输 出 "rld" 
alert(oStringObject.substring(-3)); // 输 出 "hello world" 
alert(oStringObject.slice(3, -4)); // 输 出 "1o w" 


alert(oStringObject.substring(3, -4)); // 输 出 "hel" 


最 后 一 套 要 讨论 的 方法 涉及 大 小 写 转 换 。 有 4 种 方法 用 于 执行 大 小 写 转换 ， 即 


toLowerCase() 


toLocaleLowerCase() 


toUpperCase() 


toLocaleUpperCase() 


从 名 字 上 可 以 看 出 它们 的 用 途 ， 前 两 种 方法 用 于 把 字符 串 转换 成 全 小 写 的 ， 后 两 种 方法 用 于 
把 字符 串 转 换 成 全 大 写 的 。toLowerCase() 和 toUpperCase() 方法 是 原始 的 ， 是 以 
java.lang.String 中 相同 方法 为 原型 实现 的 。toLocaleLowerCase() 和 toLocaleUpperCase() 


方法 是 基于 特定 的 区 域 实现 的 (与 localeCompare() 方法 相同 ) 。 在 许多 区 域 中 ， 区 域 特 定 


的 方法 都 与 通用 的 方法 完全 


相同 。 不 过 ， 有 几 种 语言 对 Unicode 大 小 写 转 换 应 用 了 特定 的 规 


则 (例如 土耳其 语 ) ， 因 此 必须 使 用 区 域 特定 的 方法 才能 进行 正确 的 转换 。 


String 对 象 的 所 有 属性 和 方法 都 可 应 用 于 String 原始 值 上 ， 因 为 它们 是 伪 对 象 。 


String 对 象 方 法 参考 
方法 
charAt() 
charCodeAt() 
concat() 
fromCharCode() 
indexOf() 
lastlndexOf() 
localeCompare() 
match() 
replace() 
search() 
slice() 
split() 
substr() 
substring() 
toLocaleLowerCase() 
toLocaleUpperCase() 
toLowerCase() 
toUpperCase() 
toString() 
valueOf() 


Global 


描述 

返回 在 指定 位 置 的 字符 。 
返回 在 指定 的 位 置 的 字符 的 Unicode 编码 。 
连接 字符 串 。 
从 字符 编码 创建 一 个 字符 串 。 
检索 字符 串 。 
从 后 向 前 搜索 字符 囊 。 
用 本 地 特定 的 顺序 来 比较 两 个 字符 串 。 
找到 一 个 或 多 个 正则 表达 式 的 匹配 。 
替换 与 正则 表达 式 匹 配 的 子囊 。 
检索 与 正则 表达 式 相 匹配 的 值 。 
提取 字符 串 的 片断 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 。 
把 字符 串 分 割 为 字符 串 数 组 。 
从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 。 
提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 。 
把 字符 串 转 换 为 小 写 
把 字符 串 转 换 为 大 写 。 
把 字符 串 转 换 为 小 写 。 
把 字符 串 转 换 为 大 写 

返回 字符 串 。 

返回 某 个 字符 串 对 象 的 原始 值 。 


Global 是 一 个 最 为 特殊 的 对 象 ,因为 它 实际 上 根本 不 存在 ! 如 果 裳 试 输出 Global 对 象 将 出 错 : 


alert(Global); 


但 Global 确实 是 一 个 对 象 ,要 理解 这 一 点 要 先 理 解 ECMAScript 中 一 个 概念 , 即 在 ECMAScript 中 
不 存在 独立 的 函数 ,所 有 的 函数 必须 是 某 个 对 象 的 方法 . 像 之 前 所 使 用 的 isNaN(),parselnt() 看 上 
去 像 独立 的 函数 ,其 实 它们 都 是 Global 对 象 的 方法 ,Global 对 象 的 方法 还 不 止 这 些 , 如 用 于 编 解码 
URI 的 函数 :encodeURI 与 decodeURI 方 法 


var url = "http://www.g.cn/trend page"; 
alert(encodeURI(url1));// 该 方法 会 将 一 些 不 能 用 在 URI 中 的 字符 进行 编码 
// 上 面 的 空格 将 会 被 蔡 换 成 %20, 与 之 对 应 的 decodeURI 则 是 用 来 解码 的 
alert(decodeURI(encodeURI(url)));// 原 样 输出 


与 encodeURI 和 decodeURI 相 似 的 encodeURIComponent 和 decodeURIComponent . 这 两 个 
方法 不 但 对 空格 之 类 的 字符 进行 编码 ,还 对 "和"" 这 些 URL 中 的 特殊 字符 进行 编码 


var url = "http://www.g.cn"; 
alert(encodeURIComponent(url)); // 输 出 http://%3A%2F%2Fwww.g.cn 


一 般 情况 下 要 把 一 些 字符 囊 作 为 QueryString 值 添加 到 URL 后 面 时 ,使 用 encodeURIComponent 
更 安全 些 . encodeURI 之 类 的 方法 代替 了 以 前 BOM 提 供 的 escape 与 Unescape 之 类 的 方法 ,URI 

方法 更 可 取 , 因 为 escape 方 法 只 能 对 ASCII 字 符 进行 编码 ,而 URI 方 法 则 可 以 对 所 有 的 Unicode 字 
符 进行 编码 . 应 该 总 是 使 用 URI 方 法 ,避免 使 用 escape 方 法 | 


Global 对 象 不 但 有 方法 ,还 有 一 些 属 性 :如 undefined,NaN ,Infinity 这 些 特殊 值 都 是 Global 对 象 的 
属性 ,还 有 所 有 的 内 置 引 用 类 型 的 构造 函数 (Array,Date 等 ) 都 是 的 ,只 是 不 能 通过 Global.Array 这 
样 方法 输出 来 ,它们 都 被 映射 到 了 window 对 象 上 了 . 


javascript 快 速 入 门 10-- 运 算 符 ,语句 


一 元 运算 符 只 有 一 个 参数 ， 即 要 操作 的 对 象 或 值 。 它 们 是 ECMAScript 中 最 简单 的 运单 符 。 


delete 运算 符 删除 对 以 前 定义 的 对 象 属性 或 方法 的 引用 。 例 如 
var obj = new Object(); 
obj.name = "David"; 
alert(obj.name); // 输 出 "David" 


delete obj.name; 
alert(obj.name); // 输 出 "undefined" 


delete 运算 符 不 能 删除 开发 者 未 定义 的 属性 和 方法 。 例 如 ， 下 面 的 代码 是 没什么 效果 的 : 
delete obj.toString; 

即使 toString 是 有 效 的 方法 名 ， 这 行 代码 也 会 引发 错误 ， 因 为 toString() 方法 是 原始 的 

ECMAScript 方法 ， 不 是 开发 者 定义 的 。 


delete 还 可 以 用 来 删除 数组 中 的 元 素 (这 没什么 奇怪 的 ,数组 和 对 象 是 相通 的 ) 


var arr = [2,4,6,8,10]; delete arr[2]; 
alert(arr[2]);//undefined 


void 运算 符 对 任何 值 返回 undefined。 该 运算 符 通常 用 于 避免 输出 不 应 be 的 值 ， 例 如 ， 从 
HTML 的 <a> 元 素 调 用 JavaScript 函数 时 。 要 正确 做 到 这 一 点 ， 函 数 不 能 返回 有 效 值 ， 否 则 
浏览 器 将 清空 页 面 ， 只 显示 范 数 的 结果 。 例 如 


<a href="javascript:window.open('about:blank')">Click me</a> 


如 果 把 这 行 代码 放 入 HTML 页 面 ， 点 击 其 中 的 链接 ， 即 可 看 到 屏幕 上 显示 "[object]"。TIY 这 
是 因为 window.open() 方法 返回 了 新 打开 的 窗口 的 引用 。 然 后 该 对 象 将 被 转换 成 要 显示 的 字 
符 串 。 要 避免 这 种 效果 ， 可 以 用 void 运算 符 调用 window.open() 函数 : 


<a href="javascript:void(window.open('about:blank'))">A</a> // 这 使 window.open() 调用 返回 





没有 返回 值 的 函数 丨 正 返 回 的 都 是 undefined 。 


直接 从 C (和 Java) 借用 的 两 个 运算 符 是 前 增 量 运算 符 和 前 减 量 运算 符 。 所 谓 前 增 量 运算 
符 ， 就 是 数值 上 加 1， 形 式 是 在 变量 前 放 两 个 加 号 〈(++) 


var iNum = 10; ++iNum; // 实 际 上 等 价 于 
Var iNum = 10; 
INum = INum + 1; 


同样 ， 前 减 量 运 算 符 是 从 数值 上 减 1， 形 式 是 在 变量 前 放 两 个 减 号 (--) 


var iNum = 10; --iNum; 


在 使 用 前 级 式 运算 符 时 ， 注 意 增 量 和 减 量 运算 符 都 发 生 在 计算 表达 式 之 前 。 考 虑 下 面 的 例 


var iNum = 10; --iNum; 
alert(iNum); // 输 出 "9" 
alert(--iNum); // 输 出 "8" 
alert (iNum); // 输 出 "8" 


第 二 行 代码 对 iNum 进行 碱 量 运 算 ， 第 三 行 代码 显示 的 结果 是 ("9") 。 第 四 行 代码 又 对 iNum 
进行 减 量 运算 ， 不 过 这 次 前 减 量 运算 和 输出 操作 出 现在 同一 个 语 名 中， 显示 的 结果 是 "8"。 为 
了 证 明 已 实现 了 所 有 的 减 量 操作 ， 第 五 行 代码 又 输出 一 次 "8"。 在 算术 表达 式 中 ， 前 增 量 和 前 
减 量 运 工 符 的 优先 级 是 相同 的 ， 因 此 要 按照 从 左 到 右 的 顺序 计 工 之。 例如 : 


var iNum1 = 2; var iNum2 = 20; var iNum3 = --iNum1 + ++iNum2; /22 
var iNum4 = iNum1 + iNum2;// 等 于 "22" 


还 有 两 个 直接 从 C (和 Java) 借用 的 运算 符 ， 即 后 增 量 运算 符 和 后 减 量 运 算 符 。 后 增 量 运算 
符 也 是 给 数值 上 加 1， 形 式 是 在 变量 后 放 两 个 加 号 (++) 


Ar 


后 减 量 运算 符 是 从 数值 上 减 1， 形 式 为 在 变量 后 加 两 个 减 号 (--) 


var iNum = 10; 
ijNum--， 


与 前 级 式 运 站 符 不 同 的 是 ， 后 级 式 运算 符 是 在 计算 过 包含 它们 的 表达 式 后 才 进 行 增 量 或 减 量 
运算 的 。 考 虑 以 下 的 例子 


var iNum = 10; 
ijNum--， 
alert(iNum); // 输 出 "9" 
alert (iNum--); // 输 出 "9" 
alert (iNum); // 输 出 "8" 


在 算术 表达 式 中 ， 后 增 量 和 后 减 量 运算 符 的 优先 级 是 相同 的 ， 因 此 要 按照 从 左 到 右 的 顺序 计 
算 之 。 例 如 : 


var iNum1 = 2; var iNum2 = 20; var iNum3 = INum1-- + iNum2++; A pl) 
var iNum4 = iNum1 + iNum2; VS le 


在 前 面 的 代码 中 ，iNum3 等 于 22， 因 为 表达 式 要 计算 的 是 2+20。 变 量 iNum4 也 等 于 22， 
不 过 它 计 算 的 是 1+21， 因 为 增 量 和 减 量 运算 都 在 给 iNum3 赋值 后 才 发 生 。 


大 多 数 人 都 熟悉 一 元 加 法 和 一 元 减法 ， 它 们 在 ECMAScript 中 的 用 法 与 您 高 中 数学 中 学 到 的 
用 法 相同 。 一 元 加 法 本 质 上 对 数字 无 任何 影响 ,只 用 来 表示 正 数 ,但 不 能 将 负数 转换 成 正 数 


var num=-10 ， 
alert(+num);//-10 


用 于 


[A 


但 并 不 是 一 元 加 法 就 一 无 用 处 .由 于 这 类 的 运算 符 只 能 作用 于 数字 , 因 些 , 当 将 这 些 运算 符 
字符 串 时 ,可 以 起 到 将 字符 串 转 换 成 数字 的 妙 效 ! 
var Str ="123",; 


SE = St, 
alert(typeof str);//number 


一 元 减法 也 有 这 样 的 效用 ,但 同时 , 它 还 会 对 数字 求 负 ! 


位 运算 符 是 在 数字 底层 〈 即 表示 数字 的 32 个 数位 ) 进行 操作 的 。 


ECMAScript 整数 有 两 种 类 型 ， 即 有 符号 整数 (允许 用 正 数 和 负数 ) 和 无 符号 整数 (只 允许 用 
正 数 ) 。 在 ECMAScript 中 ， 所 有 整数 字面 量 默认 都 是 有 符号 整数 


有 符号 整数 使 用 31 位 表示 整数 的 数值 ， 用 第 32 位 表示 整数 的 符号 ，0 表示 正 数 ，1 表示 人 负 
数 。 数 值 范围 从 -2147483648 到 2147483647。 


可 以 以 两 种 不 同 的 方式 存储 二 进 制 形式 的 有 符号 整数 ， 一 种 用 于 存储 正 数 ， 一 种 用 于 存储 负 
数 。 正 数 是 以 真 二 进 制 形式 存储 的 ， 前 31 位 中 的 每 一 位 都 表示 2 的 需 ， 从 第 1 位 (位 0) 开 
始 ， 表 示 20， 第 2 位 (位 1) 表示 21。 没 用 到 的 位 用 0 填充 ， 即 忽略 不 计 。 例 如 ， 下 面 展 示 
的 是 数 18 的 表示 法 。 

数 18 


0lololololololololololololololololololololololololololailololalol 
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位 31 过 源 器 位 0 
18 的 二 进 制版 本 只 用 了 前 5 位 ， 它 们 是 这 个 数字 的 有 效 位 。 把 数字 转换 成 二 进 制 字符 囊 ， 就 
能 看 到 有 效 位 : 


var iNum = 18; 
alert(iNum.toString(2)); // 输 出 "10010" 


这 sd 0 ， 而 不 是 18 的 32 位 表示 。 其 他 的 数位 并 不 重要 ， 因 为 仅 使 用 前 5 
位 即 可 确定 这 制 数值 。 如 下 图 所 示 : 


6ToTila 


(24x1) + (23x0) + (22x0) + (21x1) + (20x0) 
16 + 0 + 0 + 2 + 0 
18 
负数 也 存储 为 二 进 制 代码 ， 不 过 采用 的 形式 是 二 进 制 补 码 。 计 算数 字 二 进 制 补 码 的 步骤 有 三 
步 : 


ee 制 表示 (例如 ， 要 计算 -18 的 二 进 制 补 码 ， 首 先 要 确定 18 
制 表示 ) 

人 即 要 把 0 替换 为 1， 把 1 替换 为 0 

3. 在 二 进 制 反 码 上 加 1 


要 确定 -18 的 二 进 制 表示 ， 首 先 必 须 得 到 18 的 二 进 制 表示 ， 如 下 所 示 : 


0000 0000 0000 0000 0000 0000 0001 0010 


接 下 来 ， 计 算 二 进 制 反 码 ， 如 下 所 示 : 


1111 1111 1111 1111 1111 1111 1110 1101 


最 后 ， 在 二 进 制 反 码 上 加 1， 如 下 所 示 : 


Od 


1111 1111 1111 1111 1111 1111 1110 1110 
因此 ，-18 的 二 进 制 表示 即 1111 1111 1111 1111 1111 1111 1110 1110。 记 住 ， 在 处 理 有 符号 
整数 时 ， 开 发 者 不 能 访问 31 位 。 


然而 ， 把 负 整 数 转 换 成 二 进 制 字符 串 后 ，ECMAScript 以 二 进 制 补 码 的 形式 显示 ， 而 是 用 
数字 绝对 值 的 标准 二 进 制 代码 前 面 加 负 号 的 形式 输出 。 例 如 


var iNum = -18; 
alert(iNum.toString(2)); // 输 出 "-10010" 


这 段 代码 输出 的 是 "-10010"， 而 非 二 进 制 补 码 ， 这 是 为 避免 访问 位 31。 为 了 简便 ， 
ECMAScript 用 一 种 简单 的 方式 处 理 整数 ， 使 得 开发 者 不 必 关 心 它 们 的 用 法 。 另 一 方面 ， 无 符 
号 整数 把 最 后 一 位 作为 另 一 个 数位 处 理 。 在 这 种 模式 中 ， 第 32 位 不 表示 数字 的 符号 ， 而 是 值 
231。 由 于 这 个 额外 的 位 ， 无 符号 整数 的 数值 范围 为 0 到 4294967295。 对 于 小 于 
2147483647 的 整数 来 说 ， 无 符号 整数 看 来 与 有 符号 整数 一 样 ， 而 大 于 2147483647 的 整数 
则 要 使 用 位 31 (在 有 符号 整数 中 ， 这 一 位 总 是 0) 。 把 无 符号 整数 转换 成 字符 串 后 ， 只 返回 
它们 的 有 效 位 。 


注意 : 所 有 整数 字面 量 都 默认 存储 为 有 符号 整数 。 只 有 ECMAScript 的 位 运算 符 才 能 创建 无 
符号 整数 。 


按 位 与 AND 
按 位 或 OR 


按 位 异 或 XOR 


位 非 运算 符 首先 将 数字 转换 成 二 进 制 (32 位 ), 然 后 再 对 各 个 数位 上 的 1 替换 成 0, 而 0 则 替换 成 1 


汶 


Var num = 12; /*12 转 换 成 二 进 制 数 为 L100, 32 位 形式 为 
00000000000000000000000000001100 // 取 该 二 进 制 数 的 补 码 
11111111111111111111111111110011 //-13 */ alert(~num);//-13, 输 出 仍然 以 十 进 制 格式 
// 按 位 非 实际 上 是 对 数字 取 负 ,然后 再 减 一 


按 位 与 , 按 位 或 , 按 位 异 或 运算 符 都 是 先 将 数字 转换 成 32 位 二 进 制 数 ,然后 对 各 位 进行 操作 


/*©O&0 ==0 1| 090 ==1 
0&1== 0 1| 1==1 
起 == 1 | | 9 == 0 
ne i GNDd = 0 *Y 


var num1l = 12; var num2 = 24; /* 00000000000000000000000000001100 /7 12 
00000000000000000000000000011000 21 24 

------------------------- // & 
00000000000000000000000000001000 // 8 */ alert(num1 & num2);// 8 

/* Q0000000000000000000000000001100 12 
00000000000000000000000000011000 2 

------------------------- VA 
00000000000000000000000000011100 // 28 */ alert(numi | num2);// 28 

/* Q0000000000000000000000000001100 2 2 
00000000000000000000000000011000 // 24 
ep 生息 丰 全 让 全 扯 丰 // 和 
00000000000000000000000000010100 // 20 */ alert(num1l ^ num2);//20 
alert(num1 << 4);// 将 12 左 移 4 位 ,192 

0 左 移 运算 符 将 二 进 制 数 字 向 左 移动 N 位 ，3 空 出 的 位 置 用 9 填充 ,超出 32 位 的 截 去 (不 改变 第 32 位 ) 
00000000000000000000000000001100 

00000000000000000000000011000000 //192 */ alert(num1 >> 4);// 将 12 有 符号 右 移 4 位 ,9 
/* 有 符号 右 移 运算 符 将 二 进 制 数字 向 右 移动 N 位 ,前 面 空 出 的 位 置 用 9 填充 (不 改变 第 32 位 ) ,后 面 截 去 N 位 
00000000000000000000000000001109 //12 

00000000000000000000000000000000 //0 */ alert(num1l >>> 4);// 将 12 无 符号 右 移 4 位 ,0 
0 

// 如 果 N 大 于 Q， 第 32 位 总 会 用 0 卉 充 , 使 用 无 符号 右 移 运 算 符 得 到 的 总 是 正 数 
00000000000000000000000000001100 //12 

000000090000000000000000000000000 //0, 对 于 正 数 , 有 符号 右 移 和 无 符号 右 移 一 样 */ alert(-num1 >>> 
/* 11111111111111111111111111110100 //-12 

00001111111111111111111111111111 //268435455 */ 


dl 





Boolean 运算 符 


Boolean 运算 符 有 三 种 : NOT(!)、AND(&&) 和 OR(||)。 
逻辑 NOT 运算 符 的 行为 如 下 : 
对 于 0,true,nullNaN,undefined, 空 字符 串 ,返回 true 


对 于 非 0 数 字 , 非 空 字符 串 , 非 空 对 象 ,true, 返 回 false 


// 下 面 蕴 返回 true 
alert( I!null); 
alert(!0); 
alert(!undefined ) ; 
alert(!false); 


alert(!""); 
alert(!INaN); // 下 面 尼 返回 false 
alereti ); 


alert(!true); 
alert(!(new Object())); 
alert(!-1); 


逻辑 非 运 算 符 (!) 始 终 返 回 布尔 值 ! 


当然 ,逻辑 非 运算 符 还 有 另外 一 个 用 途 ---〉 将 其 它 类 型 转换 成 布尔 值 ， 例 如 


alert(!1NaN);//NaN 的 逻辑 值 为 false 


在 ECMAScript 中 ， 人 逻辑 AND 运算 符 用 双 和 号 (&&) 表 示 , 逻 辑 OR 运 算 答 有 双 坚 线 表 示 (||), 它 们 
的 效用 你 可 能 已 经 很 清楚 


alert(true && true);//true 
alert(false && true);//false 
alert(false && false);//false 
alert(true || true);//true 
alert(true || false);//true 
alert(false || false);//false 


然而 在 ECMAScript 中 ，AND 与 OR 运算 符 不 但 可 以 作用 于 逻辑 值 ! 


alert(34 && String);// 将 返回 34 
// 但 新 手 对 这 样 的 比较 可 能 很 迷惑 


ECMAScript 中 的 逻辑 与 逻辑 或 运算 符 又 被 称 之 为 "快速 与 "," 快 速 或 ", 或 称 之 为 "短路 与 "," 短 路 
或 ". 称 之 为 短路 或 快速 ,是 因为 它们 在 测试 两 边 条 件 时 (将 其 转换 成 布尔 值 ), 如 果 第 一 个 表达 式 的 
值 已 经 能 够 确定 整个 表达 式 值 的 时 候 ， ee 式 的 值 ,直接 将 这 个 值 返回 .比如 
与 操作 ,如 果 第 一 个 值 转换 为 布尔 是 false, 那 么 不 管 下 个 是 true 还 是 false, 整 个 表达 式 的 值 都 会 是 
false, 而 对 于 OR 运 算 符 , 则 os 那么 整个 表达 式 的 值 就 定 了 ,就 不 用 判断 
第 二 个 条 件 了 ,所 以 ,我 们 应 该 在 AND 运 算 中 将 最 可 能 是 false 的 条 件 放 在 前 面 ,而 在 OR 运算 中 , 则 
将 最 有 可 能 是 true 的 条 件 放 在 前 面 ,这 样 可 以 提高 效率 ! 我 们 可 以 用 下 面 的 例子 来 证 明 这 一 点 


function fnTrue() { 
alert(true); return true; 
} function fnFalse() { 
alert(false); return false; 
}// 注 意 是 执行 两 个 函数 ,将 返回 值 进行 比较 
var a = fnFalse() && fnTrue();// 只 会 出 现 一 个 弹 窗 ,显示 false 


//a = fnTrue() || fnFalse();// 这 一 步 只 会 出 现 一 个 弹 窗 , 显示 true 
而 对 于 这 两 个 操作 符 的 返回 值 , 则 只 要 记 住 一 点 :将 最 后 判断 的 那个 条 件 的 值 运 


//AND 中 第 一 个 为 true 时 ,还 要 继续 判断 , 第 二 个 为 false, 整个 表达 式 的 值 为 false, 同时 将 第 二 个 条 件 返回 
alert(true && false); // 当 对 其 它 类 型 使 用 AND 时 也 是 这 样 的 
alert(null && 0bject);// 将 返回 null, 因为 在 AND 运 算 中 第 一 条 件 为 false, 就 无 须 继续 了 
// 同 理 , OR 运算 也 是 如 此 
alert(Object || String);// 返 回 0bject, 因为 它 的 逻辑 值 是 true 
alert(false || NaN);// 返 回 NaN 


这 一 人 大 大 
数学 运 内 和 付 


加 法 (+), 减 法 (- Co 法 (/) 以 及 取 模 (%) 都 是 小 学 数学 的 内 容 了 ,这 里 我 们 主要 讨论 在 
ECMAScript 中 , 当 这 些 运 算 符 与 一 些 特殊 值 相 遇 时 会 是 什么 情况 


加 法 (+) 

-Infinity 加 -Infinity， 结 果 为 -Infinity。lnfinity 加 Infinity， 结 果 为 Infinity 。 
Infinity 加 -Infinity， 结 果 为 NaN 。 

当 只 要 有 一 边 是 字符 串 时 ,两 边 都 被 转换 成 字符 串 进 行 相连 
减法 (-) 

-Infinity 减 Infinity， 结 果 为 NaN 。 

-Infinity 减 -Infinity， 结 果 为 NaN。 

Infinity 减 -Infinity， 结 果 为 Infinity 。 

-Infinity 减 Infinity， 结 果 为 -Infinity 。 

来 法 (*) 

如 果 结 果 太 大 或 太 小 ， 那 么 生成 的 结果 是 Infinity 或 -Infinity 。 
Infinity 乘 以 0 以 外 的 任何 数字 ， 结 果 为 Infinity 或 -Infinity。 


Infinity 乘 以 Infinity， 结 果 为 Infinity。 


如 果 结 果 太 大 或 太 小 ， 那 么 生成 的 结果 是 Infinity 或 -Infinity 。 
Infinity 被 Infinity 除 ， 结 果 为 NaN 。 

Infinity 被 任何 数字 除 ， 结 果 为 Infinity。 

0 除 一 个 任何 非 无 穷 大 的 数字 ， 结 果 为 NaN。 

Infinity 被 0 以 外 的 任何 数字 除 ， 结 果 为 Infinity 或 -Infinity 。 
取 模 (%) 

如 果 被 除数 是 Infinity， 或 除数 是 0， 结果 为 NaN。 

Infinity 被 Infinity 除 ， 结 果 为 NaN 。 

如 果 除 数 是 无 穷 大 的 数 ， 结 果 为 被 除数 。 

如 果 被 除数 为 0， 结 果 为 0。 


如 果 对 其 它 类 型 的 值 进 行 数 学 运算 ,那么 其 它 类 型 的 值 会 自动 转换 成 数字 ,如 果 转 换 失 败 , 则 返回 
NaN( 只 有 加 法 运算 可 以 和 普通 字符 串 相连 ) 


语句 


判断 语句 :if (condition) {...} ,if (condition) {....}else {....} , if (condition) {....} else if (condition) 


循环 语句 :while (condition) {...}, do {...} while (condition) ,for (initialization; expression; post- 
loop-expression) statement; for (var key in obj) {......} 


有 标签 的 语句 与 break,continue 语 和 句 


break 和 continue 语句 的 不 同 之 处 :break 语句 可 以 立即 退出 循环 ， 阻 止 再 次 反复 执行 任何 代 
码 。 而 continue 语句 只 是 退出 当前 循环 ， 根 据 控 制 表 达 式 还 允许 继续 进行 下 一 次 循环 。 


var iNum = 0; 
outermost: for (var i=0; i<10; i++) { for (var j=0; j<10; j++) { if (i == 5 && j == 5 
} 
iNum++; 


} 


er // 输 出 "55" 
园丁 
with 语句 用 于 设置 代码 在 特定 对 象 中 的 作用 域 。 





Var sMessage = "hello"; with(SMessage) { 
alert(toUpperCase()); // 输 出 "HELLO" 
} var person = new Object(); 
person.age = 18,; 
person.name = "XXX"; 
person.parent = "ZZZ"; with (person) { 
alert(aget+"\n"+name+"\n"+parent); 
} 


With 语句 是 运行 缓慢 的 代码 块 ， 尤 其 是 在 已 设置 了 属性 值 时 。 大 多 数 情况 下 ， 如 果 可 能 ， 最 
好 避免 使 用 它 。 


javascript 快 速 入 门 11-- 正 则 表达 式 


正则 表达 式 可 以 : 


。 测试 字符 串 的 茶 个 模式 。 例 如 ， 可 以 对 一 个 输入 字符 串 进 行 测试 ， 看 在 该 字符 串 是 否 存 
在 一 个 电话 号 码 模式 或 一 个 信用 卡号 码 模式 。 这 称 为 数据 有 效 性 验证 

。 蕉 换文 本 。 可 以 在 文档 中 使 用 一 个 正则 表达 式 来 标识 特定 文字 ， 然 后 可 以 全 部 将 其 删 
除 ， 或 者 替换 为 别 的 文字 

。 根据 模式 匹配 从 字符 串 中 提取 一 个 子 字符 串 。 可 以 用 来 在 文本 或 输入 字段 中 查找 特定 文 
字 


正则 表达 式 语 法 


一 个 正则 表达 式 就 是 由 普通 字符 (例如 字符 a 到 z) 以 及 特殊 字符 ( 称 为 元 字符 ) 组 成 的 文字 
模式 。 该 模式 档 述 在 查找 文字 主体 时 待 匹 配 的 一 个 或 多 个 字符 囊 。 正 则 表达 式 作为 一 个 模 
板 ， 将 菜 个 字符 模式 与 所 搜索 的 字符 囊 进行 匹配 。 


下 表 是 元 字符 及 其 在 正则 表达 式 上 下 文中 的 行为 的 一 个 完整 参考 列表 : 








字 生 首 述 
\ 9 在 之 前 ,我 们 在 字符 囊 也 用 过 这 字符 , 即 一 些 字 答 具有 特殊 含义 ,对 
进行 转 义 使 它 成 为 普通 字符 ,而 用 在 普通 字符 上 又 表示 其 有 特殊 含义 
^ 匹配 输入 字符 串 的 开始 位 置 ,如 果 设置 了 匹配 多 行 (m) ,那么 也 匹配 行 的 开头 
$ 匹配 输入 字符 囊 的 结束 位 置 。 如 果 设 置 了 匹配 多 行 (m), 那 么 也 匹配 行 的 结 
匹配 前 面 的 子 表达 式 零 次 或 多 次 。 例 如 ，zo 能 匹配 "z" 以 及 "Zo0"。 等 价 
本 (0 
+ 匹配 前 面 的 子 表达 式 一 次 或 多 次 。 例 如 ，'zot' 能 匹配 "Zo" 以 及 "Zo0"， 但 
不 能 匹配 "Zz "zw o 十 等 价 二 {1,}° 
8 匹配 前 面 的 子 表 达 式 零 次 或 一 次 。 例 如 ，"do(es)?" 可 以 匹配 "do" 或 
"does" 中 的 "do" 。? 等 价 于 {0,1}。 
i n 是 一 个 非 负 整数 。 匹 配 确 定 的 nn 次。 例如 ，'0{2}' 不 能 匹配 "Bob" 中 的 
'0'， 但 是 能 匹配 "food" 中 的 两 个 o。 
es 站 是 一 个 非 负 整数 。 至 少 匹 配 h 次 。 例 如 ，'0{2,} 不 能 匹配 "Bob" 中 的 'o 
: 但 能 匹配 "foooood" 中 的 所 有 0。'0{1,》 等 价 于 '0+'。'0{0,) 则 等 价 于 '0*。 
mm 和 门 均 为 非 负 整 数 ， 其 中 站 <= m。 最少 匹配 n 次 且 最 多 匹配 m 次 。 刘 ， 
{n,m} "0o{1,3}" 将 匹配 "fooooood" 中 的 前 三 个 o。'0{0,1}》 等 价 于 'o?'。 请 注意 在 


去 号 和 两 个 数 之 间 不 能 有 空格 。 
当 该 字符 紧 跟 在 任何 一 个 其 他 限制 符 (*, +, ?, {n}, {n,}, {n,m}) 后 面 时 ， 匹 配 


(pattern) 


(?:pattern) 


(? 
=pattern) 


(?lpattern) 


xly 


[xyz] 


[^xyz] 


[a-z] 


[^a-z] 


\b 


\B 


\cx 


\d 


\D 


模式 是 非 贪 禁 的 。 非 贪 禁 模式 尽 可 能 少 的 匹配 所 搜索 的 字符 囊 ， 而 默认 的 
贪 禁 模式 则 尽 可 能 多 的 匹配 所 搜索 的 字符 束 。 例 如 ， 对 于 字符 囊 
"0000" ，'0+?' 将 匹配 单个 "0"， 而 '0+' 将 匹配 所 有 '0'。 


匹配 除 "\n" 之 外 的 任何 单个 字符 。 要 匹配 包括 \n' 在 内 的 任何 字符 ， 请 使 用 
象 '[.\n]' 的 模式 。 


匹配 pattern 并 获取 这 一 匹配 。 所 获取 的 匹配 可 以 从 产生 的 Matches 集合 得 
到 ， 使 用 $0...$9 属性 。 要 匹配 辆 括号 字符 ， 请 使 用 '(' 或 ')。 


匹配 pattern 但 不 获取 匹配 结果 ， 也 就 是 说 这 是 一 个 非 获取 匹配 ， 不 进行 存 
储 供 以 后 使 用 。 这 在 使 用 "或" 字符 (|) 来 组 合 一 个 模式 的 各 个 部 分 是 很 有 
用 。 例 如 ，'industr(?:ylies) 就 是 一 个 比 'industrylindustries' 更 简略 的 表达 
要 


正 向 预 查 ， 在 任何 匹配 pattern 的 字符 串 开 始 处 匹配 查找 字符 串 。 这 是 一 个 
非 获 取 匹 配 ， 也 就 是 说 ， 该 匹配 不 需要 获取 供 以 后 使 用 。 例 如 ，'Windows 
(?=95|98|NT|2000)' 能 匹配 "Windows 2000" 中 的 "Windows" ， 但 不 能 匹 
配 "Windows 3.1" 中 的 "Windows"。 预 查 不 消耗 字符 ， 也 就 是 说 ， 在 一 个 
匹配 发 生 后 ， 在 最 后 一 次 匹配 之 后 立即 开始 下 一 次 匹配 的 搜索 ， 而 不 是 从 
包含 预 查 的 字符 之 后 开始 。 


负 向 预 查 ， 在 任何 不 匹配 pattern 的 字符 串 开 始 处 匹配 查找 字符 串 。 这 是 一 
个 非 获 取 匹 配 ， 也 就 是 说 ， 该 匹配 不 需要 获取 供 以 后 使 用 。 例 如 'Windows 
(?!95|98|INTI2000) 能 匹配 "Windows 3.1" 中 的 "Windows"， 但 不 能 匹配 
"Windows 2000" 中 的 "Windows"。 预 查 不 消耗 字符 ， 也 就 是 说 ， 在 一 个 匹 
配 发 生 后 ， 在 最 后 一 次 匹配 之 后 立即 开始 下 一 次 匹配 的 搜索 ， 而 不 是 从 包 
含 预 查 的 字符 之 后 开始 


匹配 Xx 或 y。 例 如 ，'z|food' 能 匹配 "z" 或 "food"。'(z|f)ood' 则 匹配 "zood" 
或 "food"。 


字符 集合 。 匹 配 所 包含 的 任意 一 个 字符 。 例 如 ，'[abc] 可 以 匹配 "plain" 中 
的 'a'。 

负 值 字符 集合 。 匹 配 未 包含 的 任意 字符 。 例 如 ，'abc' 可 以 匹配 "plain" 中 
的 'p' O 

字符 范围 。 匹 配 指定 范围 内 的 任意 字符 。 例 如 ，'[a-z]' 可 以 匹配 'a' 到 忆 范 
围 内 的 任意 小 写字 母 字符 。 

负 值 字符 范围 。 匹 配 任何 不 在 指定 范围 内 的 任意 字符 。 例 如 ，'a2' 可 以 匹 
配 任何 不 在 'a' 到 'z' 范围 内 的 任意 字符 。 


匹配 一 个 单词 边界 ， 也 就 是 指 单 词 和 空格 间 的 位 置 。 例 如 ，'er\b' 可 以 匹 
配 "never" 中 的 'er， 但 不 能 匹配 "verb" 中 的 'er'。 


匹配 非 单 词 边界 。'er\B' 能 匹配 "Verb" 中 的 'er， 但 不 能 匹配 "never" 中 的 
"er 。 


匹配 由 x 指明 的 控制 字符 。 例 如 ，\cM 匹配 一 个 Control-M 或 回 车 符 。 X 的 
值 必 须 为 A-Z 或 az 之 一 。 否 则 ， 将 c 视 为 一 个 原 义 的 "c' 字符 。 


匹配 一 个 数字 字符 。 等 价 于 [0-9] 。 


匹配 一 个 非 数字 字符 。 等 价 于 0-9 。 


\un 


匹配 一 个 换 页 符 。 等 价 于 \x0c 和 \cL。 

匹配 一 个 换行 符 。 等 价 于 \x0a 和 \cJ。 

匹配 一 个 回 车 符 。 等 价 于 \x0d 和 \cM 。 

匹配 任何 空白 字符 ， 包 括 空格 、 制 表 符 、 换 页 符 等 等 。 等 价 于 [?\An\r\t\v] 。 
匹配 任何 非 空白 字符 。 等 价 于 fnvitwV 。 

匹配 一 个 制 表 符 。 等 价 于 \x09 和 \cl 。 

匹配 一 个 垂直 制 表 符 。 等 价 于 \XOb 和 \cK。 

匹配 包括 下 划 线 的 任何 单词 字符 。 等 价 于 '[A-Za-z0-9 ] 。 

匹配 任何 非 单词 字符 。 等 价 于 人 az0 5 。 

匹配 hn， 其 中 n 为 十 六 进 制 转 义 值 。 十 六 进 制 转 义 值 必须 为 确定 的 两 个 数 
字 长 。 例 如 ，\x41' 匹配 "A"。"\x041' 则 等 价 于 \x04'&"1"。 正 则 表达 式 中 
可 以 使 用 ASCII 编码 。. 


匹配 num， 其 中 num 是 一 个 正 整 数 。 对 所 获取 的 匹配 的 引用 。 例 
如 ，'(.)M1' 匹配 两 个 连续 的 相同 字符 。 


标识 一 个 八进制 转 义 值 或 一 个 后 向 引用 。 如 果 nn 之 前 至 少 _n 个 获取 的 子 
表达 式 ， 则 nn 为 后 向 引用 。 否 则 ， 如 果 n 为 八进制 数字 (0-7)， 则 三 为 一 个 
八进制 转 义 值 。 


标识 一 个 八进制 转 义 值 或 一 个 后 向 引用 。 如 果 nm 之 前 至 少 有 is preceded 
by atleast_nm 个 获取 得 子 表 达 式 ， 则 nm 为 后 向 引用 。 如 果 nm 之 前 至 
光 有 NM | 个 获取 ， 则 n 为 一 个 后 跟 文字 m 的 后 向 引用 。 如 果 前 面 的 条 件 痢 
不 满足 ， 若 ? n 和 m 均 为 八进制 数字 (0-7)， 则 _nm 将 匹配 和 八进制 转 义 值 


_nm® 


如 果 nn 为 八进制 数字 (0-3)， 且 m 和 | 均 为 八进制 数字 (0-7)， 则 匹配 八 进 
制 转 义 值 nml。 


匹配 nh， 其 中 是 一 个 用 四 个 十 六 进 制 数字 表示 的 Unicode 字符 。 例 如 ， 
\u00A9 匹配 版 权 符号 (?)。 


创建 正则 表达 式 


var re = new RegExp();//RegExp 是 一 个 对 象 ,和 Aarray 一 样 
// 但 这 样 没有 任何 效果 ， 需要 将 正则 表达 式 的 内 容 作 为 字符 串 传 递 进去 
re =new RegExp("a");// 最 简单 的 正则 表达 式 ,将 匹配 字母 a 
re=new RegExp("a", "i");// 第 二 个 参数 ， 表示 匹配 时 不 分 大 小 写 


RegExp 构 造 函 数 第 一 个 参数 为 正则 表达 式 的 文本 内 容 ,而 第 一 个 参数 则 为 可 选项 标志 .标志 可 
以 组 合 使 用 


。 g (全 文 查找 ) 


ei( 


忽略 大 小 写 


) 


。 m (多 行 查找 ) 


var re = new RegExp("a", "gi");// 匹 配 所 有 的 a 或 A 


正则 表达 式 还 有 另 一 种 正则 表达 式 字 面 量 的 声明 方式 


var re = /a/gi; 


和 正则 表达 式 相 关 的 方法 和 属性 
正则 表达 式 对 象 的 方法 


。 test, 返 回 一 个 Boolean 值 ， 它 指出 在 被 查找 的 字符 串 中 是 否 存在 模式 。 如 果 存 在 则 返回 
true， 否 则 就 返回 false。 

e。 exec, 用 正则 表达 式 模 式 在 字符 串 中 运行 查找 ， 并 返回 包含 该 查找 结果 的 一 个 数组 。 

e。 compile, 把 正则 表达 式 编译 为 内 部 格式 ， 从 而 执行 得 更 快 。 


正则 表达 式 对 象 的 属性 


e。 sOUrce, 返 回 正则 表达 式 模式 的 文本 的 复 本 。 只 读 。 

。 lastlndex ,返回 字符 位 置 ， 它 是 被 查找 字符 串 中 下 一 次 成 功 匹配 的 开始 位 置 。 

。 $1...$9, 返 回 九 个 在 模式 匹配 期 间 找到 的 、 最 近 保 存 的 部 分 。 只 读 。 

。 input ($ ), 返 回执 行规 范 表述 查找 的 字符 串 。 只 读 。 

。 lastMatch ($&), 返 回 任何 正则 表达 式 搜索 过 程 中 的 最 后 匹配 的 字符 。 只 读 。 

。 lastParen ($+), 如 果 有 的 话 ， 返 回 任何 正则 表达 式 查 找 过 程 中 最 后 括 的 子 匹配 。 只 读 。 

。 leftContext ($*), 返 回 被 查找 的 字符 串 中 从 字符 串 开始 位 置 到 最 后 匹配 之 前 的 位 置 之 间 的 字 
符 。 只 读 。 

。 rightContext ($'), 返 回 被 搜索 的 字符 串 中 从 最 后 一 个 匹配 位 置 开 始 到 字符 串 结 尾 之 间 的 字 


符 。 只 读 。 


String 对 象 一 些 和 正则 表达 式 相关 的 方法 


match, 找 到 一 个 或 多 个 正则 表达 式 的 匹配 。 
replace, 替 换 与 正则 表达 式 匹 配 的 子 串 。 
search, 检 索 与 正则 表达 式 相 匹配 的 值 。 
split, 把 字符 串 分 割 为 字符 串 数 组 。 


测试 正则 表达 式 是 如 何 工作 的 ! 


/V/test 方 法 ,测试 字符 串 ， 符 合 模式 时 返回 true, 否则 返回 false 
var re = /he/;// 最 简单 的 正则 表达 式 ， 将 匹配 he 这 个 单词 
var Str = "he"; 
alert(re.test(str));//true 
str = "we"; 
alert(re.test(str));//false 
St = hE 
alert(re.test(str));//false, 大写, 如果 要 大 小 写 都 匹配 可 以 指定 i 标志 (i 是 jgnoreCase 或 case-insens. 
re = /he/i; 
alert(re.test(str));//true 
str = "Certainly!He loves her!"; 
alert(re.test(str));//true, 只 要 包含 he(HE) 就 符合 , 如果 要 只 是 he 或 HE, 不 能 有 其 它 字 符 , 则 可 使 用 A 和 $ 
re = /^he/i;// 脱 字符 (人 ^) 代 表 字 符 开始 位 置 
alert(re.test(str));//false, 因为 he 不 在 Str 最 开始 
str = "He is a good boy!"; 
alert(re.test(str));//true,He 是 字符 开始 位 置 , 还 需要 使 用 $ 
re = /Ahe$/i;V/$ 表 示 字 符 结束 位 置 
alert(re.test(str));//false 
Sr 三 生疏 
alert(re.test(str));//true 
// 当 然 ， 这 样 不 能 发 现 正则 表达 式 有 多 强大 ,因为 我 们 完全 可 以 在 上 面 的 例子 中 使 用 == 或 indexOf 
re = 八 S/;// \S 匹 配 任何 空白 字符 ， 包 括 空格 、 制 表 符 、 换 页 符 等 等 
str= "User Name";// 用 户 名 包含 空格 
alert(re.test(str));//true 
str = "user Name";// 用 户 名 包含 制 表 符 
alert(re.test(str));//true 
re=/^[a-z]/i;//[] 匹配 指定 范围 内 的 任意 字符 , 这 里 将 匹配 美文 字母 ,不 区 分 大 小 写 
str="variableName";// 变 量 名 必须 以 字母 开头 
alert(re.test(str));//true 
str="123abc"; 
alert(re.test(str));//false 


国定 


当然 ,仅仅 知道 了 字符 串 是 否 匹 配 模式 还 不 够 ,我 们 还 需要 知道 哪些 字符 匹配 了 模式 





var osVersion = "Ubuntu 8";// 其 中 的 8 表示 系统 主 版 本 号 
var re = /^[a-z]+\S+\d+$/i; //+ 号 表示 字符 至 少 要 出 现 1 次 , \S 表 示 空 白字 符 , \d 表 示 一 个 数字 
alert(re.test(osVersion));//true, 但 我 们 想 知道 主 版 本 号 
// 另 一 个 方法 eXxeCc, 返回 一 个 数组 , 数组 的 第 一 个 元 素 为 完整 的 匹配 内 容 
re=/^[a-z]+\s+\d+$/i; 
arr = re.exec(osVersion); 
alert(arr[0]);// 将 0sVersion 完 整 输出 , 因为 整个 字符 囊 刚好 匹配 re 
// 我 只 需要 取出 数字 
re=/\d+/; var arr = re.exec(osVersion); 
alert(arr[0]);//8 





更 复杂 的 用 法 ,使 用 子 匹 配 


/V/exec 返 回 的 数组 第 1 到 n 元 素 中 包含 的 是 匹配 中 出 现 的 任意 一 个 子 匹配 
re=/A[a-z]+Ns+(\d+)$/i;V/ 用 () 来 创建 子 匹 配 
arr =re.exec(osVersion); 
alert(arr[9]);// 整 个 osVersion, 也 就 是 正则 表达 式 的 完整 匹配 
alert(arr[1]);//8, 第 一 个 子 匹配 ,事实 也 可 以 这 样 取出 主 版 本 号 
alert(arr.length);//2 
osVersion = "Ubuntu 8.10";// 取 出 主 版 本 号 和 次 版 本 号 
re = /^[a-z]+\s+(\d+)\.(\d+)$/i;//. 是 正则 表达 式 元 字符 之 一 , 若 要 用 它 的 字面 意义 须 转 义 
arr = re.exec(osVersion); 
alert(arr[0]);// 完 整 的 0sVersion 
alert(arr[1]);//8 
alert(arr[2]);//10 


注意 , 当 字 符 串 不 匹配 re 时 ,exec 方 法 将 返回 null 


String 对 象 的 一 些 和 正则 表达 式 有 关 的 方法 


//replace 方 法 , 用 于 替换 字符 串 
Var str ="some money"; 
alert(str.replace("some", "much"));//much money 
//replace 的 第 一 个 参数 可 以 为 正则 表达 式 
Var re = /NS/;// 室 白字 符 
alert(str.replace(re,"%"));//some%money 
// 在 不 知道 字符 串 中 有 多 少 空白 字符 时 ,正则 表达 式 极为 方便 
str ="some Some \tsome\t\f"; 
re = /\s+/; 
alert(str.replace(re, "#"));// 但 这 样 只 会 将 第 一 次 出 现 的 一 堆 空白 字符 替换 掉 
// 因 为 一 个 正则 表达 式 只 能 进行 一 次 匹配 , \s+ 匹 配 了 第 一 个 空格 后 就 退出 了 
re = /NAs+/g;/V/g, 全 局 标志 ,将 使 正则 表达 式 匹 配 整个 字符 串 
alert(str.replace(re,"@"));//some@some@some@ 
// 另 一 个 与 之 相似 的 是 split 
var str = "a-bd-c"; var arr = str.split("-");// 返 回 ["a", "bd","c"] 
// 如 果 str 是 用 户 输入 的 ,他 可 能 输入 a-bd-c 也 可 能 输入 a bd c 或 a_bd_c, 但 不 会 是 abdc (这样 就 说 他 输 错 了 ) 
str = "a_db-c";// 用 户 以 他 喜欢 的 方式 加 分 隔 符 S 
re=/[Aa-z]/i;// 前 面 我 们 说 人 表示 字符 开始 ,但 在 [] 里 它 表示 一 个 负 字 符 集 
// 匹 配 任何 不 在 指定 范围 内 的 任意 字符 , 这 里 将 匹配 除 字母 处 的 所 有 字符 
arr = Str,Split(re);// 仍 返回 ["a"y "bd","c"]; 
// 在 字符 串 中 查找 时 我 们 常用 indexOf ,与 之 对 应 用 于 正则 查找 的 方法 是 search 
str = "My age is 18.Golden age!";// 年 龄 不 是 一 定 的 , 我们 用 ijndex0f 不 能 查找 它 的 位 置 
re = /\d+/; 
alert(str,.search(re));// 返 回 查 找到 的 字符 串 开 始 下 标 10 
// 注 意 ， 因 为 查找 本 身 就 是 出 现 第 一 次 就 立即 返回 , 所 以 无 需 在 search 时 使 用 g 标 志 
// 下 面 的 代码 虽然 不 出 错 ,但 g 标 志 是 多 余 的 
re=/\d+/g; 
alert(str.search(re));// 仍 然 是 10 


加 = 一 


注意 , 当 Search 方 法 没有 找到 匹配 时 ,将 返回 -1 





类 似 于 exec 方 法 ,String 对 象 的 match 方 法 也 用 于 将 字符 串 与 正则 表达 式 进行 匹配 并 返回 结果 数 
组 


var str = "My name is CJ.Hello everyone!"; var re = /[A-Z]/;// 匹 配 所 有 大 写字 母 
var arr = Str,match(re);// 返 回 数组 
alert(arr);// 数 组 中 只 会 包含 一 个 M, 因为 我 们 没有 使 用 全 局 匹配 
re = /[A-Z]7/g; 
arr = str.match(re); 
alert(arr);//M,Cc,J,H 


// 从 字符 串 中 抽取 单词 
re = /\b[a-z]\b/i;//\b 表 示 单 词 边界 
str = "one two three four",; 


alert(str.match(re));//one,two,three, four 


RegExp 对 象 实例 的 一 些 属性 


var re = /[a-z]/i; 
alert(re.source);// 将 [a-z] 字 符 串 输出 
// 请 注意 ,直接 alert(re) 会 将 正则 表达 式 连 同 前 向 斜 线 与 标志 输出 , 这 是 re ,toString 方法 定义 的 


每 个 RegExp 对 象 的 实例 具有 lastlndex 属 性 , 它 是 被 查找 字符 串 中 下 一 次 成 功 匹 配 的 开始 位 置 ， 
默认 值 是 -1。 lastindex 属性 被 RegExp 对 象 的 exec 和 test 方法 修改 .并 且 它 是 可 写 的 ， 


var re = /[A-Z]/; //exec 方 法 执行 后 ,修改 了 re 的 1astIndex 属 性 


var Str = "Hello,World!!!"; var arr = re.exec(str); 
alert(re.lastIndex);//0, 因为 没有 设置 全 局 标志 
= /[A-2Z]/9g; 


arr = re.exec(str); 
alert(re.lastIindex);//1 
arr = re.exec(str); 
alert(re.lastIindex);//7 


当 匹 配 失 败 (后 面 没 有 匹配 ) ， 或 lastIndex 值 大 于 字符 串 长 度 时 ， 再 执行 exec 等 方法 会 将 
lastlndex 设 为 0( 开 始 位 置 ) 


var re = /[A-Z]/; var str = "Hello,Wworld!!!"; 
re.lastIindex = 120; var arr = re.exec(str); 
alert(re.lastIindex);//0 


RegExp 对 象 的 静态 属性 


//input 最 后 用 于 匹配 的 字符 囊 (传递 给 test, exec 方 法 的 字符 囊 ) 
var re = /[A-2Z]/; var str = "Hello,Wworld!!!"; var arr = re.exec(str); 
alert (RegExp. input);//Hello, world! !! 
re.exec("tempstr"); 
alert(RegExp.input);// 仍 然 是 Hello,World!11, 因 为 tempstr 不 匹配 
//lastMatch 最 后 匹配 的 字符 
= /[a-z]/g; 
St 
re.test(str); 
alert(RegExp.lastMatch);//h 
re.test(str); 
alert(RegExp["$&"]);//i ,$& 是 lastMatch 的 短 名 字 ， 但 由 于 它 不 是 合法 变量 名 ， 所 以 要 。。 
人 最 后 匹配 的 分 组 
= /[a-z](\d+)/gi; 
人 = "Class1 Class2 Class3" 
re.test(str); 
alert(RegExp.lastParen);//1 
re.test(str); 
alert(RegExp["$+"]);//2 
//leftcontext 返回 被 查找 的 字符 囊 中 从 字符 串 开始 位 置 到 最 后 匹配 之 前 的 位 置 之 间 的 字符 
//rigthContext 返回 被 搜索 的 字符 串 中 从 最 后 一 个 匹配 位 置 开始 到 字符 串 结 尾 之 间 的 字符 
re = /[A-Z]/9; 
str = "123ABC456"; 
re.test(str); 
alert(RegExp.leftContext);//123 
alert(RegExp.rightContext);//BC456 
re.test(str); 
alert(RegExp["$ "]);//123A 
alert(RegExp["$'"]);//Cc456 





multiline 属 性 返回 正则 表达 式 是 否 使 用 模式 ,这 个 属性 不 针对 某 个 正则 表达 式 实 例 ， 而 是 
针对 所 有 正则 表达 式 ， 并 且 这 个 属性 可 a 


alert(RegExp.multiline); // 因 为 TE，0pera 不 支持 这 个 属性 ， 所 以 最 好 还 是 单独 指定 
var re = /\w+/m; 
alert(re.multiline); 
alert (RegExp["$*"]); //RegEXp 对 象 的 静态 属 ' 性 不 会 因为 给 RegEXxp 某 个 对 象 实例 指定 了 m 标 志 而 改变 
RegExp .multiline = true;// 这 将 打开 所 有 正则 表达 式 实例 的 多 行 匹 配 模式 
alert(RegExp.multiline); 


页 :元 
.下 面 是 正则 表达 式 用 到 的 所 有 元 


(CU AG NO | D2 


var St 9 var re /2/; 
alert(re.test(str));// 出 错 ， 因 为 ?是 元 字符 ， 必 须 转 义 
= /\?/; 
alert(re.test(str));//true 


使 用 RegExp 构 造 亟 数 与 使 用 正则 表达 式 字 面 量 创建 正则 表达 式 注意 点 


Var Str = "\?",，; 
alert(str);// 只 会 输出 ? 
Var re = /\?/;// 将 匹配 ? 
alert(re.test(str));//true 
re = new RegExp("\?");// 出 错 ,因为 这 相当 于 re = /\?/ 
re = new RegExp("\\?");// 正 确 ， 将 匹配 ? 
alert(re.test(str));//true 


既然 双重 转 义 这 么 不 友好 ， 所 以 还 是 用 正则 表达 式 字 面 量 的 声明 方式 


如 何在 正则 表达 式 中 使 用 特殊 字符 ? 


//ASCII 方 式 用 十 六 进 制 数 来 表示 特殊 字符 
Var re = /人 X43\X4A$/;// 将 匹配 CJ 
alert(re. test ("CJ"));//true 
2 方式 

= /ANX103\112$/;// 将 匹配 CJ 
Se 
// 还 可 以 使 用 Unicode 编 码 


字符 ee eS 


式 本 身 时 ， 必 须 


re =/ 和 人 U0043\UQ04A$/;// 使 用 Unicode， 必 须 使 用 U 开 头 ， 接 着 是 字符 编码 的 四 位 16 进 制 表现 形式 


alert(re.test("CJ")); 


另 处 ， 还 有 一 些 其 它 的 预定 义 特殊 字符 ， 如 下 表 所 示 : 


中 
说 
襄 
由 


n 换行 符 

vr 回 车 符 

+ 制 表 符 

于 换 页 符 (Tab) 

一 与 X 对 应 的 控制 字符 
wb 退 格 符 (BackSpace) 
% 重 直 制 表 符 

0 空 字符 ("") 


字符 类 ---》 简 单 类 ， 反 向 类 ， 范 围 类 ， 组 合 类 ， 预 定义 类 


// 简 单 类 
var re = /[abc123]/;// 将 匹配 abc123 这 6 个 字符 中 一 个 
// 负 向 类 
re = /[^abc]/;// 将 匹配 除 abc 之 外 的 一 个 字符 
// 范 围 类 
re = /[a-b]/;// 将 匹配 小 写 a-b 26 个 字母 
re = /[^0-9]/;// 将 匹配 除 0-9 10 个 字符 之 处 的 一 个 字符 
// 组 合 类 
re = /[a-b0-9A-Z_]/;// 将 匹配 字母 ， 数 字 和 下 划 线 


下 面 是 正则 表达 式 中 的 预定 义 类 


代码 等 同 于 匹配 
IE 下 mn ， 其它 \n\r 匹配 除 换行 符 之 外 的 任何 一 个 字符 
\d [0-9] 匹配 数字 
\D 0-9 匹配 非 数 字 字 符 
\s [ \n\A\t\fWxOB] 匹配 一 个 空白 字符 
\S \n\r\t\f\xOB 匹配 一 个 非 空白 字符 
\Ww [a-zA-Z0-9 |] 匹配 字母 数字 和 下 划 线 
\W a-ZA-Z0-9 匹配 除 字 母 数 字 下 划 线 之 外 的 字符 


量词 


代码 省 玉 
匹配 前 面 的 子 表 达 式 零 次 或 多 次 。 例 如 ，zo 能 匹配 "Zz" 以 及 "Zo0"。 等 价 于 
{0,}° 
匹配 前 面 的 子 表达 式 一 次 或 多 次 。 例 如 ，'zo+' 能 匹配 "Zo" 以 及 "zoo"， 但 不 能 
匹配 "z"。+ 等 价 于 {1,}。 
匹配 前 面 的 子 表达 式 零 次 或 一 次 。 例 如 ，"do(es)?" 可 以 匹配 "do" 或 "does" 中 
的 "do" 。? 等 价 于 {0,1}。 
而 n 是 一 个 非 负 整数 。 匹 配 确定 的 n 次 。 例 如 ，'0{2)》' 不 能 匹配 "Bob" 中 的 '0'， 但 
是 能 匹配 "food" 中 的 两 个 0。 
fh】 是 一 个 非 负 整 数 。 至 少 匹配 h 次 。 例 如 ，'0{2,} 不 能 匹配 "Bob" 中 的 '0'， 但 能 
: 匹配 "foooood" 中 的 所 有 0。'0{1,》 等 价 于 '0+'。'0{0,》 则 等 价 于 '0*。 
1 和 门 均 为 非 负 整数 ， 其 中 <= m。 最 少 匹 配 n 次 且 最 多 匹配 m 次 。 刘 ， 
{n,m "of{1,3})" 将 匹配 "fooooood" 中 的 前 三 个 o。'of0,1} 等 价 于 'o?'。 请 注意 在 各 号 和 
两 个 数 之 问 不 能 有 空格 。 








贪 焚 量 词 与 惰性 量词 

e@ 用 贪 焚 量词 进行 匹配 时 ， 它 首先 会 将 整 会 字符 串 当 成 一 个 匹配 ， 如 果 匹 配 的 话 就 退出 ， 
ae 
行 匹 配 ， 直 到 有 匹配 为 止 。 直 到 现在 我 们 遇 到 的 量词 都 是 贪 禁 量 词 

。 用 贪 焚 量词 进行 匹配 时 ， 它 首先 将 第 一 个 字符 当成 一 个 匹配 ， 如 果 成 功 则 退出 ， 如 果 失 
败 ， 则 测试 前 两 个 字符 ， 依 些 增 加 ， 直 到 遇 到 合适 的 匹配 为 止 


贪 禁 情 性 

十 +? 

及 2 

* “2 

{n} {n}? 

{n,} {n,}? 

{n,m} {n,m} 

var str = "abc"; Var re = /NAw+/;// 将 匹配 abc 


re = /\W+?/;// 将 匹配 a 


多 行 模式 


var re = /[a-z]$/; var str = "ab\ncdef"; 
alert(str.replace(re,"#"));//ab\ncde# 
re =/[a-z]$/m; 
alert(str.replace(re,"#"));//a#\ncde# 


分 组 与 非 捕获 性 分 组 


re = /abc{2}/;// 将 匹配 abcc 

re = /(abc){2}/;// 将 匹配 abcabc 
Cn rn 生 分 组 

str = "abcabc ###"; 

arr = re.exec(str); 
alert(arr[1]);//abc 

// 非 捕获 性 分 组 (3: ) 

re = /(?:abc){2}/; 

arr = re.exec(str); 
alert(arr[1]);//undefined 


候选 (也 就 是 所 说 的 “或 ”) 


re = /^a|bc$/;// 将 匹配 开始 位 置 的 a 或 结束 位 置 的 bc 
str ="add"; 

alert(re.test(str));//true 

re = /^(albc)$/;// 将 匹配 a 或 bc 

str ="bc"; 

alert(re.test(str));//true 


当 包含 分 组 的 正则 表达 | 过 test,match,search 这 些 方法 之 后 ， 每 个 分 组 都 被 放 在 一 个 特殊 
的 地 方 以 备 将 来 使 用 ， 这 些 存储 是 分 组 中 的 特殊 值 ， 我 们 称 之 为 反 向 引用 


var re = /(A?(B?(C?)))/; /* 上 面 的 正则 表达 式 将 依次 产生 三 个 分 组 
(A?(B?(C?))) 最 外 面 的 
(B?(C?)) 
(CE Str MM ABC 
re. ee // 反 向 引用 被 存储 在 RegExp 对 象 的 静态 属 性 $1 一 $9 中 
alert(RegExp.$1+"\n"+RegExp.$2+"\n"+RegExp.$3); // 反 向 引用 也 可 以 在 正则 表达 式 中 使 用 \1 ,\2.. 
re = /\d+(\D)\d+\1\d+/; 
Str = "2008-1-1"; 
alert(re.test(str));//true 
str = "2008-4_3"，; 
alert(re.test(str));//false 


:一 
使 用 反 向 引用 可 以 要 求 字符 串 中 某 几 个 位 置 上 的 字符 必须 相同 .另外 ， 在 replace 这 类 方法 可 ， 
存在 特殊 字符 序列 来 表示 反 向 引用 的 方式 





re = /(\d)\s(\d)/; 
str = "1234 5678" 
SE replace(re, "$2 $1"));// 在 这 个 里 面 $1 表 示 第 一 个 分 组 1234, $2 则 表示 5678 


其 它 一 一 〉 正 向 前 瞻 , 用 来 捕获 出 现在 特定 字符 之 前 的 字符 ,只 有 当 字符 后 面 跟着 茶 个 特定 字符 
才 去 捕获 它 。 与 正 向 前 瞻 对 应 的 有 负 向 前 瞻 ， 它 用 匹配 只 有 当 字符 后 面 不 跟着 某 个 特定 字符 
时 才 去 匹配 它 。 在 执行 前 上 脆 和 负 向 前 瞻 之 类 的 运算 时 ， 正 则 表达 式 引 擎 会 留意 字符 串 后 面 的 
部 分 ， 然 而 却 不 移动 index 


// 正 向 前 瞻 
re = /([a-z]+(?=\d))/i; // 我 们 要 匹配 后 面 跟 一 个 数字 的 单词 ， 然 后 将 单词 返回 ， 而 不 要 返回 数字 
str = "abc every1 abc"; 
alert(re.test(str));//true 
alert(RegExp.$1);//every 
alert(re.lastIndex);// 使 用 前 脆 的 好 处 是 ,前瞻 的 内 容 (?3=\d ) 并 不 会 当成 一 次 匹配 ， 下 次 匹配 仍 从 它 开始 
// 负 向 前 瞻 (?1) 
re = /([a-z](?!\d))/;i // 将 匹配 后 面 不 包含 数字 的 字母 ,并且 不 会 返回 (?31\d) 中 的 内 容 
str = "abc1 one"; 
alert(re.test(str)); 
alert(RegExp.$1);//one 


构建 一 个 验证 电子 邮箱 地 址 有 效 性 的 正则 表达 式 。 电 子 邮箱 地 址 有 效 性 要 求 (我 们 姑且 这 样 定 
义 ) : 用 户 名 只 能 包含 字母 数字 以 及 下 划 线 ， 最 少 一 位 ， 最 多 25 位 ， 用 户 名 后 面 紧 跟 @， 后 面 
是 域名 ， 域 名 名 称 要 求 只 能 包含 字母 数字 和 减 号 (-) ， 并 且 不 能 以 减 号 开头 或 结尾 ， 然 后 后 
面 是 域名 后 级 (可 以 有 多 个 ) ， 域 名 后 级 必须 是 点 号 连 上 2-4 位 美文 字母 


var re = /^\w{1,15}(?:@(?!-))(?:(?:[a-z0-9-]*)(?:[a-z0-9](?!-))(?:\.(?!-)))+[a-z]{2,4}$/ 


二 | 


javascript 快 速 入 门 12-- 函 数 式 与 面向 对 象 


函数 是 一 组 可 以 随时 随地 运行 的 语句 。 
函数 是 ECMAScript 的 核心 。 


创建 函数 


// 可 以 没有 符 何 语句 
} 


var fnTwo = function () {// 匿 名 元 数 
}; 


function () {// 创 建 匿名 函数 而 不 立即 创建 其 引用 ， 那 么 之 后 就 没 办 法 调用 此 函数 
(function fnThree() { 
}) ();// 创 建 函 数 并 立即 执行 一 次 


(function () 人 )();// 创 建 匿名 函数 并 立即 执行 一 次 


匿名 郊 数 与 命名 郊 数 的 区 别 


fnOone();// 不 会 出 错 ， 使 用 function 创 建 的 具有 名 称 的 函数 在 任何 与 之 相同 作用 域 的 地 方 都 能 调用 
fnTwo( ) ; // 出 错 

var fnTwo =function () 人 ;// 因 为 只 有 执行 了 这 个 赋值 语句 后 ，fnTwo 才 会 被 创建 
function fnone() {} 


函数 返回 值 


function fnTest() { return "value";// 使 用 return 来 返回 值 
alert("Hello!11");// 执 行 了 return 之 后 ， 呜 数 就 会 退出 
} 


函数 参数 
function fnTest(argi1,arg2,arg3) { 
alert(argi+"\n"+arg2+"\n"+arg3); 


} 
fnTest(1,2,3); 
fnTest(1,2);// 没 有 传 值 过 去 时 ， 就 会 是 undefined 


arguments 对 象 ; 在 函数 执行 时 函数 内 部 就 会 有 arguments 对 象 ， 它 包含 了 所 有 的 参数 ， 
arguments 的 length 属 性 报告 了 传 入 参数 个 数 


function fnTest() { for (var i=0;i< arguments, Length;I++) { 
alert(arguments[i]); 
} 


fnTtest(1,2,3); 
fnTest(45); 


使 用 arguments 对 象 模拟 函数 重 载 


T 六 


function fnTest() { var args = arguments; Switch (arguments ,Jength) { case © : return "* 


} 

alert(fnTest()); 
alert(fnTest(1)); 
alert(fnTest(2)); 





[| 
arguments 对 象 补 充 :arguments 对 象 的 callee 属 性 指向 它 所 在 的 函数 


function fnTest() {alert(arguments.callee);} 


闭 包 


闭 包 ， 指 的 是 词法 表示 包括 不 被 计算 的 变量 的 函数 ， 也 就 是 说 ， 函 数 可 以 使 用 函数 之 外 定义 


的 变量 。 


在 ECMAScript 中 使 用 全 局 变量 是 一 个 简单 的 闭 包 实例 。 请 思考 下 面 这 段 代 码 : 
Var msg = "我 是 全 局 变量 11!"; function say() { 
alert(msg); 
} 
say(); 


在 ECMAScript 中 ， 在 函数 声明 处 向 函数 外 部 看 到 的 声明 的 所 有 变量 ， 在 函数 内 部 都 能 访问 到 
它们 的 最 终 值 ! 


var g = "全 局 变量 ! ! 1"; function fnA() { var a="A"; function fnB() { var b="B"; 
alert(a);// 可 以 访问 到 a 
alert(c);// 但 不 以 访问 Cc 
function fnC() { var c = "CC 
alert(a+"\n"+b);// 只 要 遵循 从 里 向 外 看 的 原则 ， 看 到 的 变量 都 可 以 访问 到 


} 
} // 更 复杂 的 闭 包 
function fnTest(numi,num2) { var num3 = numi+num2; return function () { 
alert("numl+num2 结 果 为 "+num3); 
}; 
} var result = fnTest(23,56); 
result(); 


闭 包 函数 只 能 访问 变量 的 最 终 值 川 


function fnTest(arr) { for (var i=0;i < arr.length;i++) { 
arr[i]=function () { 
alert(rte | aml 
}; 


} var arr = [09,1,2,3,4,5]; 

fnTest(arr); for (var i=0;i < arr.length;i++) { 
arr[i]();// 始 终 输出 6 还 有 一 个 undefined 
// 因 为 函数 退出 后 ，i 值 为 6, 所 以 访问 到 的 值 只 有 6 


不 但 在 闭 包 中 可 以 访问 闭 包 外 的 变量 值 ， 而且 还 可 以 设置 它 的 值 


function fnTest() { var a=123; return { 
set:function (param) {a = param}, 
get:function () {return a} 
}; 

} var obj = fnTest(); 

alert(obj.get());//123 

obj.set(4); 

alert(obj.get());//4 


对 象 ,构造 函数 
创建 一 个 对 象 


var obj = new Object(); 
alert(obj); 
alert(0bject);// 一 个 函数 
0bject();// 可 以 直接 执行 
// 构 造 函 数 也 是 一 个 普通 的 函数 
function Demo() { 
} var d = new Demo();// 不 会 出 错 ， 使 用 new 运 算 符 来 创建 对 象 实例 
alert(d);//object 


this 关 键 字 的 用 法 


function Demo() { this.property = "属性 ! 1 1"，; 


d = new Demo(); 
alert(d,property);// 属 性 1 1! | 


不 使 用 new 而 直接 执行 构造 函数 时 ，this 指 向 Window 


function Demo() { this.property = "属性 ! 1 1"，; 
} var d = Demo(); 
alert(d.property);//undefined 
alert(window,property);// 属 性 1 ! | 


可 以 给 构造 函数 传递 参数 ,然后 可 以 将 参数 赋值 给 对 象 的 属性 


function Person(name,age) { this.name = name; this.age = age; 
} var pli = new Person("CJ",18); 


instanceof 运算 符 ， 用 来 判断 对 象 是 否 是 某 个 类 (虽然 ECMAScript 中 并 不 存在 类 ， 但 我 们 在 
这 里 依然 使 用 这 一 术语 ) 的 实例 


var str = new String("string"); 
alert(str instanceof String);//true 
var arr = new Array(); 
alert(arr instanceof Array);//true 
function Demo() {} var d = new Demo(); 
alert(d instanceof Demo);//true 


面向 对 象 术语 


一 种 面向 对 象 语言 需要 向 开发 者 提供 四 种 基本 能 力 : 


。 封装 一 一 把 相关 的 信息 (无 论 数 据 或 方法 ) 存储 在 对 象 中 的 能 力 
。 有 聚集 一 一 把 一 个 对 象 存 储 在 男 一 个 对 象 内 的 能 力 。 

。 继承 由 另 一 个 类 《或 多 个 类 ) we 
。 多 态 编写 能 以 多 种 方法 运行 的 函数 或 方法 的 能 








ECMAScript 支 持 这 些 要 求 ， 因 此 可 被 看 作 面 向 对 象 的 。 


封装 与 私有 属性 :封装 并 不 要 求 私 有 ! 


function Person(name,age) { this.name = name;// 将 值 存储 为 对 象 的 属性 即 是 封装 
this.age = age; 
} var p1 = new Person("CJ",18); 


ECMAScript 目 前 版 本 并 不 支持 私有 属性 ， 但 可 以 通 包 来 模拟 


function Person(name,age) { this.getName = function () {return name}; this,setName = fun 
} var p1 = new Person("CJ",18); 
alert(pi.name);//undefined 
alert(pi.getName());//CJ 
pi.setName( "XXX"); 
alert(pi.getName());//XXX 





继承 : prototype 属 性 


ECMAScript 中 ， 继 承 是 通过 构造 函数 的 prototype 属 性 实现 的 


function Person(name,age) { this.name=name; this.age = name; 


alert(Person.prototype);//object 
Person.prototype.sort = "人 "; var pi = new Person("CJ",18); 
alert(p1.sort);// 所 有 的 Person 对 象 的 实例 继承 了 Sort 这 个 属性 


所 有 对 象 都 有 一 个 方法 isPrototypeOf(), 用 来 判断 它 是 不 是 另 一 个 对 象 的 原型 


function Person() {} var p1 = new Person(); 
alert(Person.prototype.isPrototypeof(p1));//true 


在 ECMAScript 中 让 一 个 类 继承 另 一 个 类 的 方式 比较 特殊 


function ClassA() { this.a = "A"; 
} function ClassB() { this.b = "B",; 
} 
ClassB.prototype = new ClassA(); // 让 ClassB 继 承 ClassA 
var b = new ClassB(); 
alert(b.a);//"A", 继承 了 属性 a 
alert(b instanceof ClassB);//true 
alert(b instanceof ClassA);//true, 因为 继承 ，b 也 是 ClassA 的 后 代 
alert(ClassB.prototype.isPrototypeOof(b));//true 
alert(ClassA.prototype.isPrototypeof(b));//true,ClassA.prototype 也 是 b 的 原型 


然而 这 样 的 继承 有 个 注意 点 





function ClassA() { this.a = "A"; 
} function ClassB() { this.b = "B"; 
} var b = new ClassB();// 先 实例 化 ClassB 
ClassB.prototype = new ClassA();// 再 去 继承 ClassA, 将 prototype 重 置 为 另 一 个 对 象 
alert(b instanceof ClassB);//false 
alert(b instanceof ClassA);//false 
alert(ClassB.prototype.iIsPrototypeof(b) );//false 
alert(ClassA.prototype.isprototypeof(b));//false 


当 构 造 函 数 需 要 参数 时 


function Person(name,age) { this.name = name; this.age = age; 

} function Teacher(name,age,lesson) { this.tempMethod = Person;// 对 象 冒 充 
this.tempMethod(name,age); // 当 执行 Person 时 ,由 于 是 在 Teacher 某 个 实例 上 调用 的 ,所 以 在 Persol 
delete this.tempMethod;// 删 除 临 时 方法 
this.lesson = lesson; 

} 

ClassB.prototype =new ClassA();// 始 终 不 应 在 继承 时 放 参 数 

var t1 = new Teacher ("HUXP",18,"C#"); 

alert(ti.name+" | "+ this.age+ " | "+this.lesson); 


EE 一 


事实 上 ， 对 于 对 象 冒充 ，ECMAScript 提 供 了 更 简洁 的 内 置 方 法 call, 在 每 个 函数 上 调用 ， 第 一 
个 参数 即 为 要 冒充 的 对 象 ， 剩 下 的 是 函数 需要 的 其 它 参 数 





function Demo(arg) { this.name = arg; 

} var obj = new Object(); 

Demo.call(obj, "name"); 

alert(obj.name);//"name" 

// 使 用 call 重 写 上 面 继承 的 例子 

function Person(name,age) { this.name = name; this.age = age; 

} function Teacher(name,age,lesson) { 
Person.call(this,name,age);// 对 和 象 冒充 
this.lesson = lesson; 


静态 属性 与 Function 类 


在 ECMAScript 里 有 个 有 趣 的 地 方 是 ， 函 数 本 身 也 是 对 象 《和 数组 也 一 样 ) ， 也 可 使 用 new 来 
创建 .Function 构 造 函 数 至 少 要 传 两 个 字符 串 参 数 ， 可 以 是 空 字符 串 。 除 了 最 后 一 个 字符 串 会 
被 当做 函数 体 语句 去 执行 ， 其 它 参 数 都 会 作为 函数 参数 变量 名 ! 


var fn = new Function();// 一 个 空 函 数 
// 创 建 有 内 容 的 函数 
fn = new Function("arg1", "alert(arg1)");// 最 后 一 个 参数 为 执行 语句 的 字符 囊 ， 前 面 参 数 全 是 函数 要 斥 
// 上 面 的 代码 等 效 于 
fn = function (arg1) {alert(arg1)};// 同 样 ， 由 于 都 是 赋值 语句 ， 所 以 要 注意 出 现 次 序 
fn.property =" 既 然 是 对 象 ， 那 么 就 要 以 添加 属性 " 


ES 


事实 上 ， 在 构造 函数 上 添加 的 属性 就 被 称 之 为 静态 属性 ， 它 不 会 被 实例 所 继承 





function ClassDemo() { 
} 
ClassDemo.property = new Array(); var d =new ClassDemo(); 
alert(d.property);//undefined 
alert(ClassDemo.property);//object 


Function 类 的 实例 还 有 其 它 一 些 方法 和 属性 (当然 ， 使 用 function 关 键 字 声明 的 函数 也 是 一 样 
的 ) 


function outer() { 
inner(); function inner() { 
alert(inner.caller); // 函 数 的 caLlLer 属 性 指向 调用 自身 的 上 下 文子 数 ， 这 里 指向 Outer 


} function applyTest() { var args = arguments; this.name = args[0]; this.age=args[1]; 
} var obj = new Object(); 

applyTest.apply(obj,["name",18]); 

alert(obj.name); 

alert(obj.age); //apply 方 法 与 call 方 法 类 似 ， 也 用 于 对 象 冒充 ， 只 是 apply 方 法 只 有 两 个 参数 

// 第 一 个 是 要 冒充 的 对 象 ， 第 二 个 是 所 有 参数 组 成 的 数组 


二 | 





javascript 快 速 入 门 13--BOM 
(Browser Object Model) 


什么 是 BOM ? 


。 BOM 是 Browser Object Model 的 缩写 ， 简 称 浏览 器 对 象 模型 
En 

。 由 于 BOM 主 要 用 于 管理 窗口 与 窗口 之 间 的 通讯 ， 因 此 其 核心 对 象 是 Window 

。 BOM 由 一 系列 相关 的 对 象 构 成 ， 并 且 每 个 对 象 都 提供 了 很 多 方法 与 属性 

BOM 缺 乏 标 准 ，JavaScript 语 法 的 标 J 组 织 是 ECMA，DOM a 准 化 组 织 是 

网 页 超 文 本 应 





用 程序 技术 工作 出 目前 正在 努力 促进 BOM 的 标准 化 ) 
。 BOM 最 初 是 Netscape 浏 览 器 标准 的 一 部 分 











基本 的 BOM 体 系 结构 图 
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能 利用 BOM 做 什么 ? 


BOM 提 供 了 一 些 访问 窗口 对 象 的 一 些 方 法 ， 我 们 可 以 用 它 来 移动 窗口 位 置 ， 改 变 窗口 大 小 ， 
打开 新 窗口 和 关闭 窗口 ， 弹 出 对 话 框 ， 进 行 导 航 以 及 获取 客户 的 一 些 信 息 如 : 浏览 器 品牌 版 
en 
document 对 象 ， 以 使 得 我 们 可 以 通过 这 个 入 口 来 使 用 DOM 的 强大 功能 1 |! | 


window 对 象 是 BOM 的 顶层 (核心 ) 对 象 ， 所 有 对 象 都 是 通过 它 延 伸 出 来 的 ， 也 可 以 称 为 window 
的 子 对 象 。 由 于 window 是 顶层 对 象 ， 因 此 调用 它 的 子 对 象 时 可 以 不 显示 的 指明 window 对 象 ， 
例如 下 面 两 行 代码 是 一 样 的 : 


document .write("BOM"); 
window.document .write("BOM"); 


window -- window 对 象 是 BOM 中 所 有 对 象 的 核心 。Wwindow 对 象 表示 整个 浏览 器 窗口 ， 但 不 必 
表示 其 中 包含 的 内 容 。 此 外 ，Wwindow 还 可 用 于 移动 或 调整 它 表 示 的 浏览 器 的 大 小 ， 或 者 对 它 
产生 其 他 影响 。 


JavaScript 中 的 任何 一 个 全 局 函数 或 变量 都 是 window 的 属性 
window 子 对 象 


e。 document 对 象 
。 frames 对 象 

e history 对 象 

。 location 对 象 

。 navigator 对 象 
。 Screen 对 象 


window 对 象 关系 属性 


。 parent : 如 果 当 前 窗口 为 fame， 指 向 包含 该 fame 的 窗口 的 fame (frame) 

。 self : 指向 当前 的 window 对 象 ， 与 window 同 意 。 (window 对 象 ) 

e top : 如 果 当 前 窗口 为 ffame， 指 向 色 2 人 hameghtop level 的 window 对 象 

。 Window : 指向 当前 的 window 对 象 ， 与 self 同 意 

。 opener : 当 窗 口 是 用 javascript 打 开 时 ， 指 向 打开 它 的 那 人 窗口 (开启 者 ) 

Window 对 象 定 位 属性 

。 IE 提供 了 window.screenLeft 和 window.screenTop 对 象 来 判断 窗口 的 位 置 ， 但 未 提供 任何 
判断 窗口 大 小 的 方法 。 用 document.body.offsetWidth 和 document.body. offsetHeight 属 性 
可 以 获取 视 口 的 大 小 (显示 HTML 页 的 区 域 )， 但 它们 不 是 标准 属性 。 

。 Mozilla 提 供 window.screenX 和 window.screenY 届 性 判断 窗口 的 位 置 。 它 还 提供 了 


window.innerWidth 和 window.innerHeight 属 性 来 判断 视 口 的 大 小 ，window.outerWidth 和 
window.outerHeight 属 性 判断 浏览 器 窗口 自身 的 大 小 。 


Window 对 象 的 方法 


窗 体 控 制 


moveBy(x,y) 一 一 从 当前 位 置 水 平移 动 窗 体 x 个 像素 ， 重 直 移 动 窗 体 y 个 像素 ，X 为 负数 ， 将 向 
左 移 动 窗 体 ，y 为 负数 ， 将 向 上 移动 窗 体 


moveTo(x,y) 一 一 移动 窗 体 左 上 角 到 相对 于 屏幕 左上 角 的 (x,y) 点 ， 当 使 用 负数 做 为 参数 时 会 吧 
窗 体 移出 屏幕 的 可 视 区 域 


resizeBy(w,h) 一 一 相对 窗 体 当 前 的 大 小 ， 宽 度 调整 Ww 个 像素 ， 调整 h 个 像素 。 如 果 参 数 为 
负 值 ， 将 缩小 窗 体 ， 反 之 扩大 窗 体 


resizeTo(w,h) 一 一 把 窗 体 宽 度 调 整 为 Ww 个 像素 ， 高 度 调整 为 h 个 像素 
窗 体 滚 动 轴 控制 


scrollTo(x,y) 一 一 在 窗 体 中 如 果 有 滚动 条 ， 将 横向 滚动 条 移动 到 相对 于 窗 体 宽 度 为 X 个 像素 的 位 
置 ， 将 纵向 滚动 条 移动 到 相对 于 窗 体高 度 为 yY 个 像素 的 位 置 





scrollBy(x,y) 滚动 条 ， 将 横向 滚动 条 移动 到 相对 于 当前 横向 滚动 条 的 X 个 像素 的 位 
置 (就 是 向 左 移动 x 像素 )， 将 纵向 滚动 条 移动 到 相对 于 当前 纵向 滚动 条 高 度 为 y 个 像素 的 位 置 
(就 是 向 下 移动 y 像 素 ) 


窗 体 焦 点 控制 

focus() 一 一 使 窗 体 或 控件 获取 焦点 

blur() 一 一 与 focus 函 数 相 反 ， 使 窗 体 或 控件 失去 焦点 

新 建 窗 体 

open() 一 一 打开 (弹出 ) 一 个 新 的 窗 体 

close() 一 一 关闭 窗 体 

opener 属 性 一 一 新 建 窗 体 中 对 父 窗 体 的 引用 ， 中 文 "开启 者 "的 意思 
window.open 方 法 语法 


window.open(url, name, features, replace); 


open 方 法 参数 说 明 


。 Ur| -- 要 载 入 窗 体 的 URL 

。 name -- 新 建 窗 体 的 名 称 (目标 ,将 在 a 标签 的 target 属 性 中 用 到 ， 当 与 已 有 窗 体 名 称 相同 时 
将 覆盖 窗 体内 容 ).open 却 数 默认 的 打开 窗 体 的 方式 为 target 的 _blank 弹 出 方式 ， 因 此 页 面 
都 将 以 弹出 的 方式 打开 

features -- 代表 窗 体 特性 的 字符 串 ， 字 符 串 中 每 个 特性 使 用 

replace -- 一 个 布尔 值 ， 说 明 新 载 入 的 页 面 是 否 葵 换 当前 载 入 的 页 面 ， 此 参数 通常 不 用 指 


pag 


人 


open 函 数 features 参 数 说 明 ,如 果 不 使 用 第 三 个 参数 ， 将 打开 一 个 新 的 普通 窗口 


参数 名 称 类 型 说 明 


height Number ”设置 窗 体 的 高 度 ， 不 能 小 于 100 

left Number 说 明 创 建 窗 体 的 左 坐 标 ， 不 能 为 负 值 

location Boolean ” 窗 体 是 否 显 示 地 址 栏 ， 默 认 值 为 no 

resizable Boolean ” 窗 体 是 否 允 许 通过 拖 动 边线 调整 大 小 ， 默 认 值 为 no 
scrollbars ”Boolean ” 窗 体 中 内 部 超出 窗口 可 视 范围 时 是 否 允 许 拖 动 ， 默 认 值 为 no 
toolbar Boolean ” 窗 体 是 否 显 示 工 具 栏 ， 上 默认 值 为 no 

top Number ”说 明 创建 窗 体 的 上 坐标 ， 不 能 为 负 值 

status Boolean 窗 体 是 否 显示 状态 栏 ， 默 认 值 为 no 

width Number ”创建 窗 体 的 宽度 ， 不 能 小 于 100 


特性 字符 串 中 的 每 个 特性 使 用 各 号 分 隔 ， 每 个 特性 之 间 不 允许 有 空格 
open 方 法 返回 值 为 一 个 新 窗 体 的 window 对 象 的 引用 
对 话 框 
alert(str) 一 一 弹出 消息 对 话 框 (对话 框 中 有 一 个 “确定 ”按钮 ) 
confirm(str) 一 一 弹出 消息 对 话 框 (对 话 框 中 包含 一 个 “确定 ”按钮 与 “取消 "按钮 ) 


prompt(str,defaultValue) 一 一 弹出 消息 对 话 框 ( 对话 框 中 包含 一 个 “确定 "按钮 、“ 取 消 " 按 钮 与 一 
个 文本 输入 框 ) ， 由 于 各 个 浏览 器 实现 的 不 同 ， 若 没有 第 二 个 参数 (文本 框 中 的 默认 值 ) 时 
也 最 好 提供 一 个 空 字符 串 


状态 栏 
window.defaultStatus 属性 一 一 改变 浏览 器 状态 栏 的 默认 显示 ( 当 状 态 栏 没有 其 它 显示 时 )， 浏 
监 览 器 底部 的 区 区 域 称 为 状态 栏 》 用 于 向 用 户 显示 信息 





window.status 属性 临时 改变 浏览 器 状态 栏 的 显示 
时 间 等 待 与 间隔 函数 


setTimeout() 暂停 指定 的 毫秒 数 后 执行 指定 的 代码 





clearTimeout() 一 一 取消 指定 的 setTimeout 远 数 将 要 执行 的 代码 


setlnterval() 一 一 问 隔 指定 的 毫秒 数 不 停 地 执行 指定 的 代码 





clearlnterval() 一 一 取消 指定 的 setlnterval 函 数 将 要 执行 的 代码 


setTimeout 与 setlnterval 方 法 有 两 个 参数 ， 第 一 个 参数 可 以 为 字符 串 形 式 的 代码 ， 也 可 以 是 函 
数 引 用 ， 第 二 个 参数 为 间隔 毫秒 数 ,它们 的 返回 是 一 个 可 用 于 对 应 clear 方 法 的 数字 ID 


var tid = SetTimeout("alert( '1')"，1000) 
alert(tid); 
clearTimeout (tid); 


History 对 月 ,在 浏览 器 历史 记录 中 导航 


History 对 象 的 属性 :length 返回 浏览 器 历史 列表 中 的 URL 数量 
History 对 象 的 方法 


。 back() 加 载 history 列表 中 的 前 一 个 URL 
。 forward() 加 载 history 列表 中 的 下 一 个 URL 
。 go(num) 加 载 history 列表 中 的 某 个 具体 页 面 


Location 对 象 
Location 对 象 的 属性 


e。 hash 设置 或 返回 从 井 号 (#) 开始 的 URL ( 锚 ) 

e host 设置 或 返回 主机 名 和 当前 URL 的 端口 号 

。 hostname 设置 或 返回 当前 URL 的 主机 名 

e href 设置 或 返回 完整 的 URL 

。 pathname 设置 或 返回 当前 URL 的 路 径 部 分 

e。 port 设置 或 返回 当前 URL 的 端口 号 

e protocol 设置 或 返回 当前 URL 的 协议 

。 search 设置 或 返回 从 问号 (?) 开始 的 URL (查询 部 分 ) 


Location 对 象 的 方法 


e。 assign() 加 载 新 的 文档 ,这 与 直接 将 一 个 URL 赋 值 给 Location 对 象 的 href 属 性 效果 是 一 样 的 

。 reload() 重新 加 载 当 前 文档 ， 如 果 该 方法 没有 规定 参数 ， 或 者 参数 是 false， 它 就 会 用 
HTTP 头 |f-Modified-Since 来 检测 服务 器 上 的 文档 是 否 已 改变 。 如 果 文 档 已 改变 ， 
reload() 会 再 次 下 载 该 文档 。 如 果 文 档 未 改变 ， 则 该 方法 将 从 缓存 中 装载 文档 。 这 与 用 4 
单 击 浏览 器 的 刷新 按钮 的 效果 是 完全 一 样 的。 如 果 把 该 方法 的 参数 设置 为 trtue， 那 么 
论文 档 的 最 后 修改 日 期 是 什么 ， 它 都 会 绕 过 缓存 ， 从 服务 器 
户 在 单 击 浏览 器 的 刷新 按钮 时 按 住 Shift 健 的 效果 是 完全 一 样 。 

。 replace() 用 新 的 文档 蔡 换 当前 文档 ，replace() 方法 不 会 在 History 对 象 中 生成 一 个 新 的 
纪录 。 当 使 用 该 方法 时 ， 新 的 URL 将 履 盖 History 对 象 中 的 当前 纪录 。 


Navigator 对 象 
Navigator 对 象 的 属性 


。 appCodeName 返回 浏览 器 的 代码 名 


。 appName 返回 浏览 器 的 名 称 

。 appVersion 返回 浏览 器 的 平台 和 版 本 信 ， 

e browserLanguage 返回 当前 浏览 器 器 的 语言 三 

。 cookieEnabled 返回 指明 浏览 器 中 是 否 启 用 cookie 的 布尔 值 
。 cpuClass 览 器 系统 的 CPU 等 级 

。 onLine 返回 指明 系 帝 是 否 处 于 脱 机 术 式 的 布尔 值 

e platform 返回 运行 浏览 器 的 操作 系统 平台 

e SystemLanguage 返回 OS 使 用 的 默认 语言 

e USerAgent 返回 由 客户 机 发 送 服务 器 的 user-agent 头 部 的 值 
。 UserLanguage 返回 OS 的 自然 语言 设置 


框架 与 多 窗口 通信 
子 窗口 与 父 窗口 


只 有 自身 和 使 用 window.open 方 法 打开 的 窗口 和 才能 被 JavaScript 访 问 ,Window.open 方 法 打开 
的 窗口 通过 Window. J > 问 父 禄 口 。 而 在 opener 窗 口中 ， 可 以 通过 Window.open 方 
法 的 返回 值 来 访问 打开 的 窗 


框架 


window.frames 集 合 : 在 框架 集 或 包含 iframe 标 签 的 页 面 中 ，frames 集 合 包 含 了 对 有 框架 中 窗 
口 的 引用 

alert(frames.length);// 框 架 的 数目 

alert(frames[9].document.body.innerHTML) ;// 使 用 下 标 直接 获取 对 框架 中 窗口 的 引用 


// 不 但 可 以 使 用 下 标 ， 还 可 以 使 用 frame 标 签 的 name 属 性 
alert(frames["frame1"].document.title); 


在 框架 集中 还 可 以 使 用 ID 来 获取 子 窗口 的 引用 


var framel1 =document .getElementById("frame1");// 这 样 只 是 获取 了 标签 
var frame1iwin = framei1.contentwindow;//frame 对 象 的 contentWindow 包 含 了 窗口 的 引用 
// 还 可 以 直接 获取 框架 中 document 的 引用 
var frameDoc = framei.contentDocument; 
alert(frameDoc ) ;// 但 IE 不 支持 contentDocument 属 性 


子 窗口 访问 父 窗口 一 Window 对 象 的 parent 属 性 


子 窗口 访问 顶层 一 Window 对 象 的 top 属 性 


浏览 器 检测 


市 场 上 的 浏览 器 种 类 多 的 不 计 其 数 ， 它 们 的 解释 引擎 各 不 相同 ， 期 待 所 有 浏览 器 都 一 致 的 支 
持 JavaScript,CSS,DOM, 那 要 等 到 不 知 什么 时 候 ， 然 而 开发 者 不 能 干 等 着 那天 。 历 史上 已 经 有 
不 少 方法 来 解决 浏览 器 兼容 问题 了 ， 主 要 分 为 两 种 : 1.UserAgent 字 符 串 检测 ，2. 对 象 检测 ; 
当然 ， 也 不 能 考虑 所 有 的 浏览 器 ， 我 们 需要 按照 客户 需求 来 ， 如 果 可 以 确信 浏览 网 站 的 用 户 
都 使 用 或 大 部 分 使 用 IE 浏览 器 ， ws 你 大 可 放心 的 使 用 |E 专 有 的 那些 丰富 的 扩展 ， 当 然 ， 一 旦 
用 户 开始 转向 另 一 个 浏览 ， 那 么 痛苦 的 日 子 便 开始 了 。 下 面 是 市 场 上 的 主流 浏览 器 列表 : 


。 Internet Explorer 
e Mozilla Firefox 
e。 Google Chrome 
e Opera 

。 Safari 


注意 ， 浏 览 器 总 是 不 断 更 新 ， 我 们 不 但 要 为 多 种 浏览 器 作 兼 容 处 理 ， 还 要 对 同一 浏览 器 多 个 
版 本 作 兼 容 处 理 。 比 如 |E 浏 览 器 ， 其 6.0 版 本 和 7.0 版 本 都 很 流行 ， 因 为 微软 IE 随 着 操作 系统 绑 
定安 装 〈 之 前 也 是 同步 发 行 ， 微 软 平 均 每 两 年 推出 一 款 个 人 桌面 ， 同 样 IE 也 每 两 年 更 新 一 

次 ; 直到 现在 ， 由 于 火狐 的 流行 ，IE 工 作 组 才 加 快 IE 的 更 新 ) ， 所 以 更 新 的 较 慢 ，6.0 版 和 7.0 
版 有 很 大 差别 。 


大 


市 场 上 还 存在 一 些 其 它 浏览 器 ， 但 由 于 它们 都 是 使 用 的 上 面 所 列 浏览 
览 器 使 用 了 相同 的 解释 引擎 ， 所 以 无 需 多 作 考 虑 。 下 面 是 主流 的 浏览 器 


be) 


强 


ee 
3 解释 引擎 列 表 : 
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1. Trident 


Trident (又 称 为 MSHTML) ， 是 微软 的 窗口 操作 系统 (Windows) 搭载 的 网 页 浏览 器 一 
Internet Explorer 的 排版 引擎 的 名 称 ， 它 的 第 一 个 版 本 随 着 1997 年 10 月 Internet Explorer 
第 四 版 释 出 ， 之 后 不 断 的 加 入 新 的 技术 并 随 着 新 版 本 的 Internet Explorer 释 出 。 在 未 来 最 
新 的 Internet Explorer 第 七 版 中 ， 微 软 将 对 Trident 排 版 引擎 做 了 的 重大 的 变动 ， 除 了 加 入 
ee 并 增加 对 网 页 标准 的 支持 。 尽 管 这 些 变 动 已 经 在 相当 大 的 程度 上 落后 了 

它 的 排版 引擎 。 使 用 该 引擎 的 主要 浏览 器 : IE，ThewWorld ，MinilIE，Maxthon ， 腾 讯 
TT 浏览 览 器 。 事 实 上 ， 这 些 浏览 器 器 是 直接 使 用 了 IE 核心 ， 因 为 其 userAgent 字 符 串 中 返回 的 
信息 与 IE 是 一 模 一 样 的 |! 


2. Gecko 


壁虎 ， 英 文 为 "Gecko"。Gecko 是 由 Mozilla 基 金 会 开发 的 布局 引擎 的 名 字 。 它 原本 叫 作 
NGLayout。Gecko 的 作用 是 读 取 诸如 HTML、CSS、XUL 和 JavaScript 等 的 网 页 内 容 ， 并 
呈现 到 用 户 屏幕 或 打印 出 来 。Gecko 已 经 被 许多 应 用 程序 所 使 用 ， 包 括 若干 浏览 器 ， 例 如 
Firefox、Mozilla Suite、Camino,Seamonkey 等 等 


3. Presto 


Presto 是 一 个 由 Opera Software 开 发 的 浏览 器 排版 引擎 ， 供 Opera 7.0 及 以 上 使 用 。 
Presto 取 代 了 旧版 Opera 4 至 6 版 本 使 用 的 Elektra 排 版 引擎 ， 包 括 加 入 动态 功能 ， 例 如 网 
页 或 其 部 分 可 随 着 DOM 及 Script 语 法 的 事件 而 重新 排版 。Presto 在 推出 后 不 断 有 更 新 版 本 
推出 ， 使 不 少 错误 得 以 修正 ， 以 及 阅读 Javascript 效 能 得 以 最 佳 化 ， 并 成 为 速度 最 快 的 引 
党 。 


4. KHTML 


是 HTML 网 页 排版 引擎 之 一 ， 由 KDE 所 开发 。KDE 系 统 自 KDE2 版 起 ， 在 档案 及 网 页 浏览 
器 使 用 了 KHTML 引 警 。 该 引擎 以 C++ 编程 语言 所 写 ， 并 以 LGPL 授 权 ， 支 援 大 多 数 网 页 浏 
览 标准 。 由 于 微软 的 Internet Explorer 的 占有 率 相 当 高 ， 不 少 以 FrontPage 制 作 的 网 页 均 
包含 只 有 IE 才能 读 取 的 非 标准 语法 ， 为 了 使 KHTML 引 擎 可 呈现 的 网 页 达到 最 多 ， 部 分 IE 
专属 的 语法 也 一 并 支援 。 目 前 使 用 KHTML 的 浏览 器 有 Safari 和 Google Chrome。 而 
KHTML 也 产生 了 许多 衍生 品 ， 如 : WebKitiWebCore 引 擎 


咒 


利用 userAgent 检 测 
下 面 是 各 大 浏览 器 使 用 弹 窗 显示 的 UserAgent 字 符 串 


IE 浏览 器 : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727) 


| bE Intermet Exzplorer 





火狐 浏览 器 : Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) 
Gecko/2008102920 Firefox/3.0.4 
[avaSscript 应 用 程序 ] 


Mozillar5.0 Windows; U; Windows NT 5.1; zh-CH: rv:1.9.0.4) Gecko/2008102920 
Firefox/3.0.4 





Opera 浏 览 器 : Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1 


Javascr1ipt 


docalhost> 
Cy Dperai/g.B4 Windows HT 5.1; U; Edition IBIS; zrh-en) 


Presto/2.1.1 


| 停止 执行 此 页 面 中 的 脚本 





II 到 


Safari 浏 况 先 : Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 
(KHTML, like Gecko) Version/4.0 Safari/528.16 


JavaScript 
Mozilla/5.0 (Windows: U;: Windows NT 5.1;: zh-CN) 


AppleWebKit/528. 16 {KHIMYL, like Gecko) Version/4.0 
Safari/528. 16 





Google Chrome 浏 览 器 : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) 
AppleWebKit/530.5 (KHTML., like Gecko) Chrome/2.0.172.33 Safari/530.5 


Javascript 


Mozillar5.0 Windows; U; Windows NT 5.1; enrUs) 
hppleWebKit/530.5 (KHIML, like Gecko) 


Chrome/2.0.172.33 Safari/530.5 





可 以 使 用 下 面 的 代码 进行 浏览 器 检测 


Var Browser = { 
isIE:navigator.userAgent.indexOf("MSIE")!=-1, 
isFF:navigator.userAgent.indexof("Firefox")!=-1, 
isOpera:navigator.userAgent.indexof("Opera")!=-1, 
isSafari:navigator.userAgent.indexof("Safari")!=-1 }; 


但 这 样 做 并 不 是 万 无 一 失 的 ， 一 个 特例 便 是 Opera 可 以 使 用 userAgent 伪 装 自己 。 下 面 是 伪装 
成 IE 的 userAgent : Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) 
Gecko/20061208 Firefox/2.0.0 Opera 9.64 ; 在 完全 伪装 的 情况 下 ， 最 后 的 “Opera 9.64” 这 个 
字符 串 也 不 会 出 现 ， 但 Opera 也 有 特殊 的 识别 自身 的 方法 ， 它 会 自动 声明 一 个 opera 全 局 变 


号 | 


里 


不 但 如 此 ， 我 们 的 检测 还 忽略 了 一 点 ， 就 是 那些 使 用 相同 引擎 而 品牌 不 同 的 浏览 器 ， 所 以 ， 
直接 检测 浏览 器 是 没有 必要 的 ， 检 测 浏览 器 的 解释 引擎 才 是 有 必要 的 ! 


Var Browser = { 
isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera, 
isGecko:navigator.userAgent.indexOof("Gecko")>-1 && !window.opera && navigator.use 
isKHTML:navigator.userAgent.indexOof("KHTML")>-1, 
isOpera:navigator.userAgent.indexof("Opera")>-1 }; 


Se 
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DOM(Document Object Model) 一 一 文档 对 凶 模 型 


什么 是 DOM? 


Document Object Model (DOM) 是 HTML 和 XML 文档 的 编程 接口 。 它 提供 了 上 述 文档 的 一 种 结 
构 化 表示 ， 同 时 也 定义 了 一 种 通过 程序 来 改变 文档 结构 ， 风 格 ， 以 及 内 容 的 方式 。 DOM 用 一 
组 结构 化 的 节点 以 及 对 人 象 来 表示 文档 。 本 质 上 就 是 将 网 页 和 脚本 语言 以 及 编程 语言 连接 起 


SD A a 也 可 以 以 html 源 码 的 形式 显示 。 
这 两 中 情况 中 ， 文 档 都 是 同一 个 。DOM 提 供 了 另 一 种 方式 来 表示 ， 存 储 ， 操 作 这 个 文档 。 
DOM 是 网 页 的 一 种 完全 的 面向 对 象 的 表示 方法 ， 可 以 通过 脚本 语言 (比如 说 JavaScript) 来 

改变 。 


W3C DOM 标 准 形成 了 当今 大 多 数 浏 览 器 的 DOM 基 础 。 许 多 浏览 器 提供 超出 W3C 标 准 的 扩 
展 ， 所 以 当 用 在 可 能 被 拥有 不 同 DOM 的 各 种 浏览 器 使 用 的 场合 时 一 定 要 多 加 注意 


DOM 标 准 主要 要 为 : 微软 DOM 与 W3C DOM， 一 般 IE 实 现 的 是 微软 DOM， 而 其 它 浏览 器 则 不 
同 程度 的 实际 了 W3C DOM 


DOM 发 展 史 


。 DOM Level Zero | 0 版 本 ， 只 是 人 们 的 戏称 。 只 是 在 W3C DOM 出 
现 之 前 ， 不 同 浏览 器 (主要 是 |E 与 NN) 实现 的 DOM 相 互 排斥 ，1996 年 的 浏览 器 大 战 所 
产 生 的 DHTML 就 是 所 谓 的 DOM 0， 它 是 脚本 程序 员 的 恶 梦 

。 DOM Level 1 包括 DOM Core 和 DOM HTML 。 前 者 提供 了 基于 XML 的 文档 结构 图 。 后 者 
添加 了 I 的 对 象 和 方法 ， 从 而 扩展 了 DOM Core. 目 前 IE 在 内 的 大 部 分 桌面 济 
览 器 都 通过 不 同方 式 实现 了 DOM 1 

。 DOM Level 2 引入 几 个 新 模块 : DOM 视 图 ， 事 件 ， 样 式 ， 遍 历 和 范围 。|IE 只 实现 了 一 部 
分 ， 火 狐 浏 览 器 几乎 全 部 实现 ， 除 IE 之 外 的 浏览 器 也 实现 了 大 部 分 

。 DOM Level 3 引入 了 以 统一 的 方式 载 入 和 保存 文档 的 方法 。DOM Core 被 扩展 支持 所 有 的 
XML1.0 的 特性 。 火 狐 浏 览 器 之 类 实现 了 少 部 分 


在 开始 阶段 ，JavaScript 和 DOM 是 紧密 的 联系 在 一 起 的 ， 但 是 最 终 他 们 将 发 展 为 独立 的 实 
体 。 网 页 的 内 容 存储 在 DOM 中 并 且 可 以 被 JavaScript 访 问 和 处 理 ， 所 以 我 们 可 以 得 到 写 下 这 
个 近似 的 等 式 : 


API (网 页 或 者 XML 页 面 ) 二 DOM 十 JS (脚本 语言 ) 


DOM 被 设计 为 独立 于 任何 特定 的 编程 语言 ， 通 过 协调 一 致 的 API 尺 确保 这 种 文档 的 结构 化 表 
现形 式 是 有 效 的 。 虽 然 DOM 的 实现 可 以 建立 在 任何 语言 上 ， 但 是 在 这 里 我 们 专注 于 
JavaScript 上 的 DOM 实 现 ! 


尽管 DOM 很 大 程度 上 受到 浏览 器 中 动态 HTML 发 展 的 影响 ， 但 W3C 还 是 将 它 最 先 应 用 于 
XML 。 


DOM 与 BOM 的 关系 


DOM 与 BOM 的 关系 ?一 一 BOM 包 含 DOM 


DOM 与 BOM 结 构 视 图 


Browser Objects (BOM) 





DOM Core 


文档 对 象 模型 -DOML, 就 是 使 用 树 视图 来 形容 HTML 代 码 ,看 下 面 的 一 张 HTML 页 面 的 源 代码 


<html> 

<head> 
<title> 树 1 树 !1 到 处 都 是 树 1!1</title> 

</head> 

<body> 
<h1> 树 ! 树 ! 到 处 都 是 树 1</h1> 
<p>HTML 那 层 层 谋 套 的 代码 就 像 一 哥 <em> 树 </em> 一 样 1</p> 
<div> 一 层 一 层 的 树 <img src="../images/stach_heap.gif" /> </div> 

</body> 

</html> 


浏览 器 接受 该 页 面 并 将 之 转换 为 树 形 结构 


李 炎 恢 HTML CSS JavaScript PHP Bootstrap 教程 


HT 只 那 屋 屋 该 套 
的 代码 就 像 一 襟 





获取 元 素 常用 方法 

document 对 象 是 BOM 的 一 部 分 ， 同 时 也 是 HTML DOM 的 HTMLDocument 对 象 的 一 种 表现 形 
式 ， 反 过 来 说 ， 它 也 是 XML DOM Document 对 象 。JavaScript 中 的 大 部 分 处 理 DOM 的 过 程 都 
利用 document 对 象 ， 所 以 我 们 访问 文档 需要 使 用 BOM 提 供 的 这 个 入 口 。 


var d = document ， 
alert(d);// 这 仅仅 表明 document 这 个 对 象 是 存在 的 


document 对 象 有 三 个 强大 的 方法 ， 可 以 获取 页 面 的 任何 元 素 
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var pl = document.getElementById("p1");// 获 取 ID 为 p1 的 那个 元 素 
// 在 一 个 文档 中 ID 必 须 是 唯一 的 ，getElementById 方 法 只 会 返回 一 个 元 素 
alert(p1.tagName); var allP = document.getElementsByTagName("p");// 获 取 文 档 中 所 有 p 标 签 
// 因 为 页 面 中 标签 相同 的 元 素 很 多 ,所 以 即使 页 面 中 只 有 一 个 p 元 素 , getElementsByTagName 也 会 返回 一 个 集合 
for (var i=0;i < allP.length;i++) { 
alert(allP[i] .innerHTML);// 像 数组 一 样 访问 其 中 的 每 个 元 素 
} //getElementsByTagName 还 可 以 使 用 通配符 * 来 获取 所 有 的 元 素 
var allTags = document .getElementsByTagName("*"); 
alert(allTags.length); // 更 强大 的 是 ， getElementsByTagName 不 但 可 以 在 document 对 象 上 调用 ， 也 可 
var p2 = document.getElementById("p2"); var p2ps = p2.getElementsByTagName("em");// 将 
// 还 有 一 个 通过 name 来 获取 元 素 的 方法 :getElementsByName 
var radios = document.getElementsByName("check");// 获 取 所 有 name 为 check 的 元 素 


引 i 








由 于 name 可 以 重复 ，getElementsByName 方 法 始终 返回 一 个 集合 ， 不 管 页 ee 
是 唯一 的 。 IE 6.0 和 Opera 7.5 在 这 个 方法 的 使 用 上 还 存在 一 些 错误 。 首 先 ， 它 们 还 会 返回 id 
等 于 给 定名 称 的 元 素 。 第 二 ， 它 们 仅仅 检查 <input/> 和 <img/> 元 素 。 


获取 和 设置 元 素 属 性 一 -getAttribute 与 setAttribute 方 法 


var p1 = document.getElementById("p1"); 
alert(p1.getAttribute(" Id") ); 
pi.setAttribute("title","Value"); 


节点 基础 
文档 根 节点 


var de = document.documentElement; 
alert(de.tagName); 


由 于 IE 5.5 中 的 DOM 实 现 的 错误 ，document.documentElement 会 返回 <body/> 元 素 。IE 
6.0 已 经 修复 了 这 个 错误 。 


获取 head 与 body 


// 本 来 可 以 使 用 getElementsByTagName 的 
var head = document .getElementsByTagName("head")[0]; var body = document.getElementsB 


wx 


还 可 以 使 用 节 ， 点 ,在 使 用 节点 前 ， 先 了 解 一 些 点 其 古 础 知识 








e 元 素 节 点 文档 中 具有 标签 的 节点 
。 文本 节点 标签 中 不 是 注释 的 文本 块 





常用 的 节点 属性 


e。 nodeType 一 一 节点 类 型 ， 元 素 节点 是 1， 文 本 节点 是 3 


e nodeValue 一 一 节点 值 ， 元 素 节 空 ， 文 本 节点 的 nodeValue 属 性 即 为 文本 内 容 











。 firstChild 该 元 素 节点 包 ee 
e。 lastChild 该 元 素 节点 包含 的 最 后 一 个 子 节点 
。 nextSibling 该 节点 的 后 一 个 兄弟 节点 





e。 previousSibling 该 节点 的 让 节点 

。 childNodes 一 一 子 节 点 列表 ,可 以 通过 node.childNodes[index] (或 
node.childNodes.item(index)) 来 获取 子 节 点 

。 nodeName 一 一 节点 名 称 ， 对 于 元 素 节 点 ， 返 回 tagName, 对 于 文本 ， 则 返回 #text 


考虑 下 面 的 HTML 代 码 所 表示 的 节点 结构 


<p> Some Text </p> 


上 面 的 HTML 代 码 将 会 解析 成 两 个 节点 :元 素 节点 文本 节点 
ee ge 
呢 ? 








不 同 浏览 器 在 关 J 上 存在 一 些 差 异 。 某 些 ; oe sp ， We ， 认 为 元 素 之 间 的 
空白 (包括 换行 符 ) 都 是 Text 节 点 ; 而 另 一 些 浏览 器 ， 如 IE， 会 全 部 忽略 这 些 空白 1 


var de = document.documentElement; var head = de.firstchild;//html 下 面 第 一 个 元 素 ， 可 能 是 heac 
var body = de.lastCchild;//html 下 面 最 后 一 个 元 素 ， 可 能 是 body 


:| 


答案 并 不 确定 ， 但 是 仍然 有 办 法 解决 一 “使 用 节点 类 型 检测 ,每 个 节点 都 有 nodeType 属 性 ， 指 
明 它 的 节点 类 型 。 对 于 元 素 节 点 ， 它 的 值 是 1， 而 对 于 文本 节点 ， 它 的 值 是 3 





var de = document.documentElement; var head = de.firstchild.nodeType==1?de,.firstCchild:de 
var de = document.documentElement; var head = de.childNodes[0].nodeType==1?de.childNo 


国 一 一 





HTML DOM 
HTML DOM 用 对 象 来 表示 HTML 标 签 ,考虑 下 面 的 代码 一 一 


<img src=",./images/stack_heap.jpg"” alt=" 内 存 堆栈 " onclick="alert('Hello!')" /> // 对 于 上 下 
{ 


src:"../images/stack_heap.jpg", 
alt:" 内 存 堆 栈 "， 
onclick:"alert('Hello!')", 
tagName: "IMG" 


}; 
// 其 实 不 止 这 些 属性 








一 般 所 说 的 DOM 是 指 XML DOM ; 而 W3C 也 为 HTML 页 面 提供 了 更 快捷 的 DOM 一 一 HTML 
DOM! 使 用 HTML DOM ， 能 使 访问 HTML 标 签 的 属性 就 像 访 问 JavaScript 创 建 的 对 象 的 属性 一 
样 简单 . 


var img0bj = document.getElementById("img0bj"); 
alert(img0bj .src);// 获 取 src 属 性 如 此 简单 


使 用 HTML DOM 也 使 得 访问 页 面 一 些 元 素 变 得 更 加 简单 


var bodyTag = document.documentElement.lastChild;//DOM 标 准 方式 
bodyTag = document.body;//HTML DOM 方 式 
var titleTag = document.getElementsByTagName("title")[0].firstchild.nodeValue;//DOM 标 , 
titleTag = document.title;//HTML DOM 方 式 
//HTML DOM 不 仅仅 可 以 用 来 获取 内 容 ， 也 可 以 设置 
document ,title ="Change The Title!!!"; 


国 玫 = 于 = 类 产 8 装 
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节 ， 


点 类 型 


DOM 定 义 了 Node 的 接口 以 及 许多 种 节点 类 型 来 表示 节点 的 多 个 方面 ! 


Document 一 一 最 顶层 的 节点 ， 所 有 的 其 他 节点 都 是 附属 于 它 的 。 
DocumentType 一 一 DTD 引 用 (使 用 <IDOCTYPE > 语法 ) 的 对 象 表现 形式 ， 例 如 
<IDOCTYPE HTML PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" >。 它 不 能 包含 
子 节点 。 

DocumentFragment 一 一 可 以 像 Document 一 样 来 保存 其 他 节点 。 
Element 一 一 表示 起 始 标签 和 结束 标签 之 间 的 内 容 ， 例 如 <tag ></tag > 或 者 <tag / >。 这 
是 唯一 可 以 同时 包含 特性 和 子 节点 的 节点 类 型 。 

Attr 一 一 代表 一 对 特性 名 和 特性 值 。 ， 点 类 型 不 能 包含 子 节点 。 

Te ME 中 的 在 起 始 标 签 和 结束 标签 之 间 ， 或 者 CData Section 内 包含 的 普 
通 文 本 。 eg nt 。 

CDataSection 一 <![CDATA[ ]]}> 的 对 象 表现 形式 。 这 个 节点 类 型 仅 能 包含 文本 节点 Text 
作为 子 节点 

Entity 一 一 表示 在 DTD 中 的 一 个 实体 定义 ， 例 如 <!IENTITY foo "foo">。 这 个 节点 类 型 不 能 
包含 子 节点 。 

EntityReference 一 一 代表 一 个 实体 引用 ， 例 如 "。 这 个 节点 类 型 不 能 包含 子 节点 。 
| 。 这 个 节点 类 型 不 能 包含 子 节点 。 
Comment 一 一 代表 注释 。 这 个 节点 类 型 不 能 包含 子 节点 。 

Notation 一 一 代表 在 DTD 中 定义 的 记号 。 这 个 很 少 用 到 ， 所 以 我 们 不 会 讨论 。 





还 定义 了 对 应 不 同 节点 类 型 的 12 个 常量 . 


Node.ELEMENT_NODE (1) 
Node.ATTRIBUTE_NODE (2) 
Node.TEXT_NODE (3) 
Node.CDATA_SECTION_NODE (4) 
Node.ENTITY_REFERENCE_NODE (5) 
Node.ENTITY_NODE (6) 
Node.PROCESSING_INSTRUCTION_NODE (7) 
Node.COMMENT_NODE (8) 
Node.DOCUMENT_NODE (9) 
Node.DOCUMENT_TYPE_NODE (10) 
Node.DOCUMENT_FRAGMENT_NODE (11) 
Node.NOTATION_NODE (12) 


节点 类 型 常量 都 是 Node 对 象 的 属性 ， 但 是 IE 不 支持 Node 对 象 ,但 是 仍 可 以 使 用 数值 


Node 接 口 也 定义 了 一 些 所 有 节点 类 型 都 包含 的 特性 和 方法 。 我 们 在 下 面 的 表格 中 列 出 了 这 些 
特性 和 方法 : 


特性 /方法 类 型 /返回 类 型 说 明 
节点 的 名 字 ; 根据 节点 的 类 型 而 定义 ,元 素 节 
nodeName String 点 返回 tagName， 文 本 节点 返回 #text, 属 性 节 
点 返回 属性 名 
节点 的 值 ; 根据 节点 的 类 型 而 定义 .元 素 节 点 
nodeValue String 此 属性 为 室 ， 文 本 节点 些 属性 即 为 节点 中 的 
字符 串 ， 属 性 节点 返回 属性 值 
nodeType Number 节点 的 类 型 常量 值 之 一 
ownerDocument Document 指向 这 个 节点 所 属 的 文档 
firstChild Node 指向 在 childNodes 列 表 中 的 第 一 个 节点 
lastChild Node 指向 在 childNodes 列 表 中 的 最 后 一 个 节点 
childNodes NodeList 所 有 子 节 点 的 列表 
pe 指向 前 一 个 兄弟 节点 ; 如 果 这 个 节点 就 是 第 
previousSibling Node el 
ee 指向 后 一 个 兄弟 节点 ; 如 果 这 个 节点 就 是 最 
nextoibling Nods 后 一 个 兄弟 节点 ， 那 么 该 值 为 null 
当 chi 外 念 一 个 或 多 个 节点 时 ， 返 
hasChildNodes() Boolean 2 ND 0 
句 今 了 代表 一 仆 元 喜 的 特性 邮 二 瘟 ， 
i Ne 二 他 了 代表 - 个 元 素 的 特性 的 Attr 对 象 ; 仅 用 
于 Element 节 点 
appendChild(node) “Node 将 node 添 加 到 childNodes 的 末尾 
removeChild(node) Node 从 childNodes 中 删除 node 
replaceChild Node 将 childNodes 中 的 oldnode 替 换 成 newnode 
(newnode,oldnode) 
insertBefore Node 在 childNodes 中 的 refnode 之 前 插入 newnode 


(newnode,refnode) 


除 节 点 外 ，DOM 还 定义 了 一 些 助 手 对 象 ， 它 们 可 以 和 节点 一 起 使 用 ， 但 不 是 DOM 文 档 必 有 的 


局 


y 


e。 NodeList 一 一 节点 数组 ， 按 照 数值 进行 索引 ; 用 来 表示 一 个 元 素 的 子 节点 。 比 如 
childNodes。NodeList 有 个 length 属 性 表示 节点 数量 

。 NamedNodeMap 一 一 同时 用 数值 和 名 字 进 行 索引 的 节点 表 ; 用 于 表示 元 素 特性 。 比 如 元 
素 的 attributes 。NamedNodeMap 对 象 也 有 一 个 length 属 性 来 指示 它 所 包含 的 节点 的 数 


号 - 
O 


里 





这 些 助手 对 象 为 处 理 DOM 文 档 提供 附加 的 访问 和 遍历 方法 。 


属性 节点 


正如 前 面 提 到 的 ， 即 便 Node 接 口 已 具有 attributes 方 法 ， 且 已 被 所 有 类 型 的 节点 继承 ， 然 而 ， 
只 有 Element 节 点 才能 有 特性 。Element 节 点 的 attributes 属 性 其 实 是 NamedNodeMap， 它 提 
供 一 些 用 于 访问 和 处 理 其 内 容 的 方法 : 


e。 getNamedltem(name)- 返回 nodeName 属 性 值 等 于 name 的 节点 ; 

。 removeNamedltem(name) 一 一 删除 nodeName 属 性 值 等 于 name 的 节点 ; 

。 setNamedltem(node) 一 一 将 node 添 加 到 列表 中 ， 按 其 nodeName 属 性 进行 索引 ; 
。 item(pos) 一 一 像 NodeList 一 样 ， 返 回 在 位 置 pos 的 节点 ; 


请 记 住 这 些 方 法 都 是 返回 一 个 Attr 节 点 ， 而 非特 性 值 。 


当 NamedNodeMap 用 于 表示 特性 时 ， 其 中 每 个 节点 都 是 Attr 节 点 ， 它 的 nodeName 属 性 被 设 
置 为 特性 名 称 ， 而 nodeValue 属 性 被 设置 为 特性 的 值 。 示 例 : 


<p Id="p1"” style="background-color:red;" title="P!!!">Some Text!</p> var p1 = document.g 
// 访 问 ID 属 性 
alert(p1.attributes.getNamedItem("id")).nodevalue 
// 也 可 以 用 数值 来 访问 ID 属性 
alert(p1.attributes,. Item(0)).nodevalue 
// 也 可 以 改变 它 的 值 
p1.attributes.getNamedItem("id"),.nodevalue = "newp1"; 


JI ll 
Attr 节 点 也 有 一 个 完全 等 同 于 (同时 也 完全 同步 于 ) nodeValue 属 性 的 value 属 性 ， 并 且 有 


name 属 性 和 nodeName 属 性 保持 同步 。 我 们 可 以 随意 使 用 这 些 属性 来 修改 或 变更 特性 。 但 这 
些 方 法 都 比较 复杂 ， 所 以 DOM 又 定义 了 三 个 元 素 方法 来 帮助 访问 特性 : 





。 getAttribute(name) 一 一 等 于 attributes.getNamedltem(name).value 
。 setAttribute(name, newValue)—— 等 于 attribute.getNamedltem(name).value = newValue 
。 removeAttribute(name) 一 一 等 于 attributes.removeNamedltem(name) 


NodeList 
事实 上 我 们 早 接触 过 NodeList 了 


var allTags = document.getElementsByTagName(™*"); 
alert(allTags.item(1) .tagName);// 访 问 了 第 二 个 元 素 
alert(allTags[0]);// 在 JavaScript 可 以 这 样 访问 第 一 个 元 素 ， 但 这 只 能 是 JavaScript 里 正常 运行 


getElementsByTagName 与 getElementsByName 都 返回 NodeList， 可 以 使 用 item(index) 方 法 
访问 其 中 的 内 容 ， 在 JavaScript 中 还 可 使 用 数组 形式 的 下 标 访 问 ! 


创建 和 操纵 节点 


迄今 为 止 ， 已 经 学 过 了 如 何 访 问 文档 中 的 不 同 节 点 ， 不 过 这 仅仅 是 使 用 DOM 所 能 实现 的 功能 
中 的 很 小 一 部 分 。 还 能 添加 、 删 除 、 替 换 (或 者 其 他 操作 ) DOM 文 档 中 的 节点 。 正 是 这 些 功 
We 态 性 。 


创建 新 节点 


DOM Document (文档 ) 中 有 一 些 方法 用 于 创建 不 同类 型 的 节点 ， 即 便 在 所 有 的 浏览 器 中 的 
浏览 器 document 对 象 并 不 需要 全 部 支持 所 有 的 方法 。 下 面 的 表格 列 出 了 包含 在 DOM Level 1 
中 的 方法 ， 并 列 出 不 同 的 浏览 器 是 否 支持 项 。 





方 法 描 述 IE MOZ OP SAF 
createAttribute (name) i 全 定名 称 name 创 建物 性 x x x = 
用 包含 文本 text 的 文本 子 节 
createCDATASection (text) 点 创建 一 个 CDATA x 三 一 
Section 
包含 冯 的 注释 节 
createComment(text) 本 包含 文本 fext 的 注释 闻 | x x x x 
createDocumentFragment() ”创建 文档 碎片 节点 x x x x 
示 答 名 六 自 
createElement (tagname) 全 建 标签 名 为 tfagname 的 x x x x 
元 素 
createEntity 创建 给 定名 称 的 实体 引用 本 加 加 
Reference(name) 节点 
createProcessing 创建 包含 给 定 target 和 datla 。_  、 加 三 
Instruction(target, data) 的 P| 节点 
包含 立 的 文本 节 
create TextNode(text) 全 包 合 文人 IRXI 扩 相让 x x 


注 : |E = Windows 的 IE 6 ; MOZ = 任意 平台 的 Mozilla 1.5 ; OP= 任 意 平 台 的 Opera 7.5; 
SAF=MacOS 的 Safari 1.2 


最 常用 到 的 几 个 方法 是 : createDocumentFragment()、createElement() 和 createText- 
Node() ; 其 他 的 一 些 方法 要 么 就 是 没什么 用 (createComment()) ， 要 么 就 是 浏览 器 的 支持 不 
够 ， 目 前 还 不 太 能 用 。 


动态 创建 一 个 段落 示例 


var p = document.createElement("p");// 创 建 一 个 元 素 节 点 ， 传 入 标签 名 
var txt = document ,createTextNode(" 创 建文 本 节点 ， 传 参数 即 是 文本 内 容 " ) ; 
p.appendChild(txt);// 将 txt 所 引用 的 文本 节点 插入 p 到 p 的 最 后 面 (在 这 里 p 是 空 的 ) 
// 直 到 现在 ， 页 面 不 会 出 现任 何 内 容 ， 必 须 将 创建 的 节点 插入 到 文档 中 
document .body.appendChild(p);//p 将 出 现在 最 后 


移动 ， 删 除 节 点 方法 及 注意 事项 





appendChild,removeChild,replaceChild,insertBefore 


var p1 = document.getElementById("p1"); 
document .body.appendChild(p1);//pi 将 会 被 作为 Dody 的 最 后 一 个 子 节点 ， 然 而 页 面 上 仍 只 有 一 个 p 
pi.parentNode.removeChild(p1);//removeChild 必 须 是 要 删除 的 节点 的 父 节点 调用 
//p1 将 会 从 页 面 上 消失 ， 然 而 它 并 没有 完全 消失 ， 我 们 还 可 以 再 将 其 插入 文档 
document .body.appendCchild(p1);// 因 为 变量 p1 包 含 了 节点 的 引用 
var p2 = document .getE1LementById("p2”") ， 
p2.parentNode.repLaceCchild(p1,p2),;//p2 将 会 被 蔡 换 成 pD1，p2 将 消失 
// 而 p1 将 从 原来 的 位 置 移 到 p2 的 位 置 


克隆 节点 一 一 cloneNode 
六 


基于 上 面 的 原因 ，DOM 为 我 们 提供 了 一 个 克隆 节点 的 方法 用 于 生成 一 个 节点 的 副本 


var p1 = document.getElementById("p1"); var p2 = pi1.cloneNode(); 
document .body.appendChild(p2);// 页 面 上 将 会 多 出 一 个 段落 ,不 过 段落 中 什么 都 没有 
p2 = pli.cloneNode(true);// 使 用 参数 true 表 示 克 隆 节点 时 包含 子 节点 
document .body.appendchild(p2); 


javascript 快 速 入 门 15-- 表 单 


大 多 数 Web 页 面 与 用 户 之 间 的 交互 都 发 生 在 表单 中 ， 表 单 中 有 许多 交互 式 HTML 元 素 如 : 文本 
域 ， 按 钮 ， 复 选 框 ， 下 拉 列 表 等 。 从 文档 对 象 层次 图 中 可 以 看 到 ， 表 单 是 包含 在 文档 中 的 ， 
所 以 要 访问 表单 ， 仍 然 需 要 通过 document 对 象 来 访问 


Form 对 象 


表单 就 是 指 的 form 标 签 及 其 里 面 的 内 容 ， 要 获取 一 个 表单 对 象 ， 可 以 给 某 个 form 标 签 加 个 jd 属 
性 ， 然 后 使 用 document.getElementByld 方 法 获得 。 也 可 以 使 用 
document.getElementsByTagName("form") 来 获取 所 有 表单 的 集合 ， 然 后 通过 下 标 来 访问 。 
还 可 以 给 form 标 签 加 个 hame 属 性 ， 然 后 可 以 使 用 document.getElementsByTagName 来 访 

问 ， 注 意 ， 同 样 要 使 用 下 标 来 访问 


事实 上 ，0 级 DOM (0 级 DOM 并 不 是 任何 DOM 规 范 ， 事 实 上 它 是 BOM 的 内 容 ， 但 浏览 器 都 实 
现 的 比较 好 ) 为 我 们 提供 了 更 简单 的 访问 From 对 象 的 方法 





使 用 document.formName 


<form name="formName"></form> var fm = document.formName;// 可 以 这 样 来 直接 引用 该 表单 对 象 
// 与 document .getElementsByTagName("form") 相 对 应 有 document .forms 集 合 
var fm = document.forms[9];// 获 取 第 一 个 Form 对 象 


访问 表单 元 素 
Form 对 象 有 个 elements 属 性 ， 包 是 一 个 含 了 form 标 签 里 面 的 所 有 表单 控件 (input,select 等 标 


签 ， 但 不 包含 如 div 之 类 的 标签 ) 的 伪 数 组 


var fm = document .forms[0]， 
alert(fm.elements.length);//length 属 性 报告 了 元 素 的 个 数 


在 之 前 ， 访 问 input 这 类 标签 和 访问 其 它 标 签 没 什么 区 别 ， 可 以 使 用 |DD， 也 可 以 使 用 
className, 但 当 它们 在 表单 中 时 ， 可 以 使 用 它们 的 nam 有 来 访问 


<form name="formName"> 
<input name="textInput" type="text" value=" 文 本 框 " /> 
</form> alert(document.formName.textInput.value); 


Form 对 人 象 相关 事件 及 方法 


当 表 单 提 交 时 会 发 生 submit 事 件 ， 我 们 可 以 设置 事件 监听 ， 当 用 户 提交 表单 时 检查 表单 内 
容 。 同 时 ， 如 果 用 户 输 入 有 误 ， 要 阻止 表单 提交 ， 可 以 在 事件 处 理 函 数 里 return false 就 行 
了 ， 当 正确 时 可 以 调用 表单 的 Submit 方 法 提交 表单 ， 使 用 表单 的 Submit 方 法 时 不 会 执行 Submit 


事件 处 理 函 数 


document .formName.onsubmit = function () { // 检 查 表单 
If (result) { this.submit(); 
} else { return false; 


} 
}; 


当 表 单 被 重 置 时 会 发 生 reset 事 件 ， 但 这 个 事件 意义 不 大 ， 因 为 reset 按 钮 本 身 意义 就 不 大 。 同 
时 也 有 一 个 reset 方 法 


document .formName.onreset = function () { if (confirm(" 您 盖 的 要 重 置 表单 吗 ?")) { this.re.; 
} else { return false; 





表单 元 素 
单 选 按钮 与 复 选 框 


单 选 按钮 与 复 选 框 有 个 共同 的 属性 一 checked， 指 明 该 按钮 是 否 被 选中 。 而 不 同 的 是 ， 往 往 
多 个 单 选 按钮 使 用 同一 个 name 来 分 到 相同 的 组 ， 且 只 能 有 一 个 被 选中 ， 那 么 ， 使 用 这 个 
name 访 问 它 时 ， 由 于 多 个 按钮 使 用 同一 个 名 字 ， 它 会 返回 一 个 数组 ， 而 当 只 有 一 个 时 (事实 
不 存在 单 选 按钮 只 有 一 个 单独 存在 的 情况 ) ， 它 又 会 返回 这 个 元 素 


var radios = document ,formName ,radios;// 页 面 中 多 个 单 选 按钮 name 为 radios 
alert(radios.length);// 返 回 一 个 元 素 列表 
var one = document.formName.one;// 只 有 一 个 
alert(one.checked);// 只 返回 这 个 元 素 


与 checked 类 似 的 ， 它 们 还 有 个 defaultChecked 属 性 ， 返 回 是 否 是 在 HTML 指 定 默认 选中 的 


单行 文本 框 与 多 行文 本 框 


单行 文本 框 即 type 属 性 设 为 text 的 input 标 签 ， 多 行文 本 框 即 textarea， 它 们 除了 与 其 它 input 标 
签 一 样 具 有 的 value 属 性 处 ， 还 具有 defaultValue 属 性 表示 文本 框 中 的 默认 文本 ， 即 在 HTML 里 
所 指定 的 value 值 的 


文本 框 还 有 一 个 方法 : select, 可 以 使 文本 框 中 的 文字 呈 选 中 状态 。 


Select 对 象 


表单 元 素 中 最 复杂 的 就 算是 select 对 象 了 。 ee ， 含 option 标 签 ， 也 有 可 
包含 optgroup 标 签 。 虽 然 select 可 以 多 选 ， 但 我 们 这 里 只 讨 本 ， ， 多 选 的 类 似 | 


// 首 先 ， 获取 select 对 象 也 是 通过 name (当然 ID 仍 然 有 效 ， 但 name 更 快捷 ) 
var select = document.formName.mySel; // 要 获取 用 户 选 中 了 第 几 项 ， 可 以 使 用 它 的 selectedIndex 
alert(select.selectedIndex);// 这 个 索引 号 是 从 9 开始 的 
//select 对 象 有 个 options 伪 数组 类 型 的 属性 ， 包 含 了 所 有 的 option， 可 以 使 用 下 标 来 访问 
alert(select.options[select.selectedIndex].value);// 输 出 选中 项 的 
alert(select.options[select.selectedIndex].text);//text 属 性 是 option 包 含 的 文本 
// 本 来 需要 知道 Select 里 面 有 多 少 个 option， 可 以 通过 options.length 
// 但 HTML DOM 为 select 对 象 也 提供 了 length 属 性 
alert(select.length);// 输 出 和 options.length 一 样 


4 | 


获取 选中 项 的 值 





Var mySel = document.formName.mySel; 
alert(mySel.options[mySel.selectedIndex] .value); // 更 快捷 的 方法 
alert(mySel.value); 


而 向 select 对 象 中 添加 option， 本 可 以 使 用 document.createElement 及 appendChild 等 方法 
的 ， 但 HTML DOM 为 我 们 提供 了 更 方便 的 方法 了 


var opt = new 0ption(" 新 增 选项 文本 ", "选项 值 ");//document.createElement("option"); 
var Select = document.formName.mySel; 
select.add(opt, select.options[0]);// 将 opt 添 加 到 第 一 个 option 的 后 面 
select.add(opt);// 在 IE 下 ， 没 有 第 二 个 参数 时 ， 会 将 opt 添 加 到 最 后 
// 上 面 的 代码 在 FF 下 会 出 错 ， 必 须 使 用 下 面 的 方法 
select.add(opt,null);// 但 这 在 IE 会 出 错 
// 下 面 的 方法 可 以 两 全 了 ,但 长 了 一 点 
select.add(opt, select .options[select.length-1]); // 删 除 option 的 方法 remove 
select.remove(1);//remove 接 收 参 数 为 要 移 除 


options 数 组 最 特殊 的 一 个 地 方 在 于 它 和 鼻 正 的 数组 十 分 相似 ， 可 以 设置 它 的 length 来 减少 元 
素 ， 也 可 以 直接 将 元 素 赋 给 某 项 来 修改 


var opts = document .formName .mySel.options ; 
opts[0]=new Option("Text","Value"); 
opts.length=2;// 将 移 去 第 三 个 之 后 的 0ption 
opts[3]=new 0ptions("ABC",123);// 自 动 添加 一 个 元 素 


Option 对 象 也 有 defaultSelected 属 性 返回 在 HTML 里 指定 是 否 是 默认 选中 项 


表单 元 素 特 性 事件 


当 表 单 控件 失去 焦点 时 会 触发 blur 事 件 ， 当 控件 获得 焦点 时 又 会 触发 focus 事 件 。 与 之 对 应 ， 
blur 方 法 将 使 表单 控件 失去 焦点 ，focus 方 法 将 使 控件 获得 焦点 ， 与 Form 对 象 的 Submit 方 法 一 
样 ， 使 用 JavaScript 执 行 blur 方 法 与 focus 方 法 并 不 会 触发 相关 事件 监听 函数 


select 对 象 的 change 事 件 : 当 用 户 选中 一 个 选项 ， 或 者 取消 了 对 一 个 选项 的 选 定时 ， 就 会 发 生 
change 事 件 。 


textarea 对 象 的 change 事 件 : 当 用 户 改变 文本 区 域 的 值 然 后 通过 把 键盘 焦点 移动 到 其 他 地 
方 “ 确 认 ” 这 些 改 变 的 时 候 ， 发 生 change 事 件 。 


select 事件 : 当 文 本 框 中 的 文本 被 选中 时 发 生 


javascript 快 速 入 门 16-- 表 格 


表格 的 层次 结构 


<table border="1"> 
<caption> 表 格 标题 </caption> 
<thead> 
<tr> 
<th> 表 头 1</th> 
<th> 表 头 2</th> 
<th> 表 头 3</th> 
</tr> 
</thead> 
<tfoot> 
< 
<td colspan="3"> 脚 注 </td> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td> 数 据 </td> 
<td> 数 据 </td> 
<td> 数 据 </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td> 数 据 </td> 
<td> 数 据 </td> 
<td> 数 据 </td> 
</tr> 
</tbody> 
</table> 


上 面 是 一 个 创建 表格 所 用 到 的 所 有 标签 ， 但 一 些 标签 是 可 写 可 不 写 的 ， 事 实 上 一 般 的 表格 只 
需 写 上 tf 与 td 标签 就 行 了 ， 而 标题 caption, 表 头 thead 表 尾 tbody 等 则 是 一 些 语义 性 元 素 


表格 对 象 的 一 些 属性 


var table= document .getElementById("myTable"); // 获 取 表 格 标题 caption 标 签 
var caption = table.getElementsByTagName("caption")[0]; //HTML DOM 提 供 的 更 简单 的 方法 
caption= table.caption;// 返 回 表格 标题 caption 标 签 ， 如果 没有 则 返回 nu11 
if (caption) { 
alert(caption.firstChild.nodeValue);// 输 出 标题 文本 
} var thead =table.tHead;// 获 取 表 头 
var tfoot = table.tFoot,;// 获 取 表 尾 


由 于 caption,thead,tfoot 这 些 标签 一 个 表格 中 只 能 出 现 一 次 ， 所 以 HTML DOM 提 供 了 直接 的 属 
性 来 访问 ， 而 对 于 tr,td,th,tbody 这 些 重复 的 标签 ，HTML DOM 则 给 Table 对 象 增加 了 一 些 集合 
来 访问 


// 获 取 所 有 tr 
var rows = table.getELlementsByTagName("tr" ) ;// 但 会 获取 秦 套 表格 中 的 tr 
//rows 集 合 只 会 包含 表格 的 行 ， 而 不 包含 表格 下 面 许 套 表 格 的 行 
rows = table.rows;// 返 回 包含 表格 中 所 有 行 的 一 个 数组 
alert(rows[6].innerHTML); var tBodies = table.tBodies;// 返 回 包含 表格 中 所 有 tbody 的 一 个 数组 
var cells =table.cel1ls;// 返 回 包 含 表 格 中 所 有 单元 格 的 一 个 数组 
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注意 ， 对 于 Table 对 象 的 cells 属 性 ， 它 将 返回 所 有 td,th 标 签 ， 而 对 于 tBodies 属 性 ， 即 使 
HTML 源 代码 中 没有 tbody 标 签 ， 也 会 默认 有 一 个 tbody 


表格 对 象 的 一 些 方法 


创建 标题 :createCaption() 方法 用 于 在 表格 中 获取 或 创建 元 素 。 返 回 一 个 HTMLElement 对 
象 ， 表 示 该 表 的 元 素 。 如 果 该 表格 已 经 有 了 标题 ， 则 返回 它 。 如 果 该 表 没 有 元 素 ， 则 创建 一 
个 新 的 空 元 素 ， 把 它 插入 表格 ， 并 返回 它 。 


var caption = document.createElement("caption"); 
caption.appendchild(document.createTextNode(" 新 标题 " ) ) ; 
table.insertBefore(caption, table.firstChild); /* 上 面 方法 有 两 大 缺点 : 
工 .方法 复杂 
2 ,如果 已 经 存在 Caption 标 签 ， 则 会 造成 Caption 标 签 重复 ， 寻 致 后 插入 的 无 效 */ caption = table.create 
// 因 为 该 方法 必须 在 对 应 的 表格 对 象 上 调用 
caption.innerHTML = "新 标题 " ; 


[RE 








与 createCaption 相 似 的 还 有 : 


e。 createTFoot() 在 表格 中 创建 一 个 空 的 tFoot 元 素 ;返回 一 个 TableSection， 表 示 该 表 的 
《tfoot》 元 素 。 如 果 该 表格 已 经 有 了 脚注 ， 则 返回 它 。 如 果 该 表 没 有 脚注 ， 则 创建 一 个 
新 的 空 〈tfoot》 元 素 ， 把 它 插入 表格 ， 并 返回 它 。 

。 createTHead() 在 表格 中 创建 一 个 空 的 tHead 元 素 ;返回 一 个 TableSection， 表 示 该 表 的 
(thead》 元素 。 如 果 该 表格 已 经 有 了 表 头 ， 则 返回 它 。 如 果 该 表 没 有 表 头 ， 则 创建 一 个 
新 的 空 《〈thead》 元 素 ， 把 它 插入 表格 ， 并 返回 它 。 


既然 有 增加 的 方法 ， 就 有 对 应 的 删除 的 方法 


。 deleteCaption() 从 表格 删除 caption 元 素 以 及 其 内 容 。 如 果 该 表 有 《〈caption》 元素， 
则 从 文档 树种 删除 它 。 否 则 ， 什 么 也 不 做 。 

。 deleteTFoot() 从 表格 删除 tFoot 元 素 及 其 内 容 。 如 果 该 表 有 (tfoot〉 元素， 则 将 它 从 文 
档 树种 删除 ， 和 否则 什么 也 不 做 。 

。 deleteTHead() 方法 用 于 从 表格 删除 thead 元 素 。 如 果 该 表 有 《thead》 元 素 ， 则 将 它 从 
文档 树种 删除 ， 否 则 什么 也 不 做 。 


添加 与 删除 行 


。 insertRow() 在 表格 中 插入 一 个 新 行 。 返回 一 个 TableRow， 表 示 新 插入 的 行 。 该 方法 创 
建 一 个 新 的 TableRow 对 象 ， 表 示 一 个 新 的 《〈tr》 标记 ， 并 把 它 插 入 表 中 的 指定 位 置 。 新 


行将 被 插入 index 所 在 行 之 前 。 若 index 等 于 表 中 的 行 数 ， 则 新 行将 被 附加 到 表 的 末尾 。 
如 果 表 是 空 的 ， 则 新 行将 被 插入 到 一 个 新 的 《〈tbody〉 段 ， 该 段 自身 会 被 插入 表 中 。 

。 deleteRow() 从 表格 删除 一 行 。 参 数 index 指定 了 要 删除 的 行 在 表 中 的 位 置 。 行 的 编码 顺 
序 就 是 他 们 在 文档 源 代码 中 出 现 的 顺序 。 (thead〉 和 《tfoot》 中 的 行 与 表 中 其 它 行 一 起 
编码 。 


行 (TableRow) 对 象 


行 对 象 的 一 些 属性 : cells 属 性 返回 行 中 所 有 单元 格 的 一 个 数组 。rowlndex 属 性 返回 该 行 在 表 
中 的 位 置 。sectionRowlndex 属 性 返回 在 tBody 、tHead 或 tFoot 中 ， 行 的 位 置 。 


var row = table.rows[0]; 
alert(row.cells.length);// 第 一 行 中 单元 格 的 数目 
alert(row.rowIndex);//0 


TableRow 对 象 的 方法 


e deleteCell() 删除 行 中 的 指定 的 单元 格 。 参 数 index 是 要 删除 的 表 元 在 行 中 的 位 置 。 该 方 
法 将 删除 表 行 中 指定 位 置 的 表 元 。 

e。 insertCell() 在 一 行 中 的 指定 位 置 播 入 一 个 空 的 td 元 素 。 返回 一 个 TableCell 对 象 ， 表 示 新 
创建 并 被 插入 的 td 元素。 该 方法 将 创建 一 个 新 的 td 元 素 ， 把 它 插入 行 中 指定 的 位 置 。 
新 单元 格 将 被 插入 当前 位 于 index 指定 位 置 的 表 元 之 前 。 如 果 index 等 于 行 中 的 单元 格 
数 ， 则 新 单元 格 被 附加 在 行 的 末尾 。 请 注意 ， 该 方法 只 能 插入 td 数据 表 元 。 若 需要 给 行 
添加 头 表 元 ， 必 须 用 Document.createElement() 方法 和 Node.insertBefore() 方法 (或 相 
关 的 方法 ) 创建 并 插入 一 个 th 元 素 。 


var row = table.rows[2]; var cell = row,insertCe]l1(2); 
cell.innerHTML = "新 插入 的 单元 格 "，;，// 上 面 的 代码 与 下 面 的 等 效 ( 但 不 考虑 空白 文本 节点 ) 
Var cell = document.createElement("td"); 
cell.innerHTML = "新 插入 的 单元 格 "， 
row.insertBefore(cell,row.childNodes[2]); // 删 除 单 元 格 
row.deleteCell1(2); // 等 效 代码 (同样 不 考虑 空白 文本 节点 ) 
row.removeChild(row.childNodes[2]); 


TableCell 单元 格 对 象 


与 TableCell 对 象 相关 的 有 用 的 属性 只 有 一 个 : celllndex 属 性 返回 单元 在 格 行 中 的 下 标 


alert(table.rows[2].cells[3].cellIindex);//3 
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事件 (上 ) 
JavaScript 事 
件 列表 
事件 
一 般 事 件 


ondblclick 
onmousedown 


onmouseup 
onmousSseover 


onmousSsemove 


onmouseout 
onkeypress 


onkeydown 


onkeyup 
页 面相 关 事 件 


onbeforeunload 
onerror 

onload 

onmove 
onresize 


onscroll 
onstop 


oncontextmenu 


onunload 


解说 
onclick 


鼠标 双击 时 触发 此 事件 
按 下 鼠标 时 触发 此 事件 
鼠标 按 下 后 松 开 和 鼠标 时 甬 发 此 事件 


当 鼠 标 移 动 到 某 对 象 范围 的 上 方 时 触发 此 事 
作 


鼠标 移动 时 触发 此 事件 
当 筷 标 离 开 某 对 象 范围 时 触发 此 事件 


当 键 盘 上 的 某 个 键 被 按 下 并 且 释 放 时 触发 此 
事件 . 


当 键 瘟 上 某 
当 键 益 上 某 


个 按键 被 按 下 时 触发 此 事件 
个 按键 被 按 放 开 时 触发 此 事件 


onabort 


当前 页 面 的 内 容 将 要 被 改变 时 触发 此 事件 
着 误 时 触发 此 事件 

完成 时 触发 此 事件 

浏览 器 的 窗口 被 移动 时 触发 此 事件 

当 浏 览 器 的 窗口 大 小 被 改变 时 触发 此 事件 
浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 此 事件 


浏览 器 的 停止 按钮 被 按 下 时 触发 此 事件 或 者 
正在 下 载 的 文件 被 中 断 


当 弹 出 右键 上 下 文 菜单 时 发 生 
当前 页 面 将 被 改变 时 触发 此 事件 


鼠标 点 击 时 触发 此 事 
人 


图 片 在 下 载 时 被 用 户 
中 断 


当前 元 素 失 去 焦点 时 


触发 此 事件 
当前 元 素 失 去 焦点 并 且 元 素 的 内 容 发 生 改 变 


onchange 而 触发 此 事件 

onfocus 当 某 个 元 素 获得 焦点 时 触发 此 事件 

onreset 当 表 单 中 RESET 的 属性 被 激发 时 触发 此 事件 
onsubmit 一 个 表单 被 递交 时 触发 此 事件 


了 解 上 面 的 事件 如 此 简单 ， 那 么 事件 还 有 什么 可 讲 的 呢 ? 


问题 一 : 每 个 事件 只 能 注册 一 个 函数 


var oDiv = document.getElementById("oDiv"); 
oDiv.onclick = fni; 
oDiv.onclick =fn2; function fn1() {falert(" 我 被 覆盖 了 1")} function fn2() {falert(" 只 有 我 入 





obj.onclick = function () { 
ns 
在 0 2 的 区 
fn3 (的 

}; 


缺陷 一 : 需要 将 所 有 函数 一 次 添加 进去 ， 不 能 在 运行 时 添加 


缺陷 二 : 在 事件 处 理 函 数 中 this 将 指向 window, 而 不 是 obj 


function addEvent(fn,evtype,obj) { //obj 是 要 添加 事件 的 HTML 元 素 对 象 
//evtype 是 事件 名 字 ， 不 包含 on 前 级， 因为 每 个 都 有 on， 所 以 写 个 on 是 多 余 的 
/Vfn 是 事件 处 理 函 数 
var oldFn; if (obj["on"+evtype] instanceof Function) { 

oldFn = obj["on"+evtype];// 当 添加 函数 时 ， 如 果 已 注册 过 了 ， 则 将 其 保存 起 来 


obj["on"+evtype]=function () { if (oldFn) { 
oldFn.call(this); 


} 
fn.call(this);// 使 用 call 方 法 ， 使 事件 处 理 函 数 中 的 this 仍 指向 obj 


这 样 已 经 解决 了 问题 ， 但 如 何 删 除 事 件 呢 ? 如 果 直 接 将 对 象 的 onevtype 这 类 的 属性 赋值 为 null 
将 会 删除 所 有 的 事件 处 理 函 数 ! 


解决 方案 二 的 修改 版 : 先 将 事件 存储 起 来 ， 存 储 在 对 象 的 ”EventHandles 属 性 里 面 


eventHandlesCounter=1;// 计 数 器 ， 将 统计 所 有 添加 进去 的 函数 的 个 数 , 0 位 预 留 作 其 它 用 
function addEvent(fn,evtype,obj) { if (!fn. EventID) {//__EventID 是 给 函数 加 的 一 个 标识 ，! 
fn.__EventID=eventHandlesCounter++; // 使 用 一 个 自动 增长 的 计数 器 作为 光 数 的 标识 以 保证 不 4 
} if (!obj. EventHandles) { 
obj. EventHandles=[];// 当 不 存在 ， 也 就 是 第 一 次 执行 时 ， 创 建 一 个 ， 并 且 是 数组 
} if (!0obj. EventHandles[evtype]) {// 将 所 有 事件 处 理 函数 按 事件 类 型 分 类 存放 
obj. EventHandles[evtype]=[];// 当 不 存在 时 也 创建 一 个 数组 
if (obj["on"+evtype] instanceof Function) { // 查 看 是 否 已 经 注册 过 其 它 函 数 
// 如 果 已 经 注册 过 ， 则 将 以 前 的 事件 处 理 函 数 添加 到 数组 下 标 为 6 的 预 留 的 位 置 
obj.__EventHandles[evtypel[90]=obj["on"+evtypel]; 
obj["on"+evtype]=handleEvents;// 使 用 handleEvents 集 中 处 理 所 有 的 函数 








} 
obj. EventHandles[evtype][fn. EventID]=fn; // 如 果 函 数 是 第 一 次 注册 为 事件 处 理 函 数 ， 那 么 


// 如 果 函 数 已 经 注册 过 相同 对 象 的 相同 事件 了 ， 那 么 将 履 盖 原来 的 而 不 会 被 添加 两 次 
function handleEvents() { var fns = obj. EventHandles[evtype]; for (var i=0;i< f 
fns[i].call(this); 





使 用 上 面 的 函数 已 经 可 以 在 一 个 对 象 添加 多 个 事件 处 理 函 数 ， 在 函数 内 部 this 关 键 字 也 指向 了 
相应 的 对 象 ， 并 且 这 些 函 数 都 被 作 了 标识 ， 那 么 移 除 某 个 事件 处 理 函 数 就 是 轻而易举 的 了 | 
// 使 用 传统 方法 : obj .onevtype = null; 但 这 样 会 移 除 所 有 的 事件 处 理 函 数 


function delEvent(fn,evtype,obj) { if (!obj, EventHandles || !obj. EventHandles[evt 
} if (obj. EventHandles[evtypel][fn. EventID] == fn) { delete obj. EventHandles 





Es 
事件 (下 ) 
事件 对 象 一 一 Event 


事件 对 象 是 用 来 记录 一 些 事件 发 生 时 的 相关 信息 的 对 象 。 事件 对 象 只 有 事件 发 生 时 才 会 产 
生 ， 并 且 只 能 是 事件 处 理 函 数 内 部 访问 ， 在 所 有 事件 处 理 函 数 运行 结束 后 ， 事 件 对 象 就 被 销 


毁 ! 


访问 事件 对 象 : W3C DOM 方 法 与 |E 专 用 方法 


//W3C DOM 把 事件 对 象 作为 事件 处 理 函数 的 第 一 个 参数 传 入 进去 

document ,onclick = function (evt) {V// 这 样 ， 事 件 对 象 只 能 在 对 应 的 事件 处 理 函 数 内 部 可 以 访问 到 
alert(evt ) 

}; //IE 将 事件 对 象 作 为 Window 对 象 的 一 个 属性 〈 相 当 于 全 局 变量 ) 

// 和 貌似 全 局 对 象 ， 但 是 只 有 是 事件 发 生 时 才能 够 访问 

alert(window.event);//null 

window.onload = function () { 

alert (window.event); 


小 


事件 对 象 的 属性 及 方法 


属性 名 值 类 型 读 / 写 描述 
对 于 特定 的 鼠标 事件 ， 表 示 按 下 的 鼠标 按 
钮 ， 该 属性 仅 可 以 在 mouseup 与 
mousedown 事 件 中 访问 。W3C 规定 :0 
表示 按 下 了 左 键 ，1 表 示 按 下 了 中 键 ，2 表 
示 按 下 了 右键 ， 相 当 于 对 于 鼠标 键 从 左 到 
button Integer  R 右 进行 的 编号 ， 而 编号 从 0 开始 ; 而 IE 有 
另外 一 套 规定 : 0 表示 没有 任何 键 按 下 ，1 
表示 左 键 ，2 表 示 右 键 ，4 表 示 中 键 ， 而 其 
它 按 键 的 组 合 则 只 要 将 键 码 相 加 即 可 ， 
如 : 同时 按 下 左右 键 时 button 值 为 3 
事件 发 生 时 ， 和 鼠标 在 客户 端 区 域 的 X 坐 
a 人 标 ， 客 户 端 区 域 是 指 页 面 可 视 区 域 
clientY Integer -CR 事件 发 生 时 ， 和 鼠标 在 客户 端 区 域 的 Y 坐 标 
screenX Integer ”R(IE)R/W(W3C) ， 相 对 于 屏幕 的 鼠标 X 坐 标 
screenY Integer ”R(IE)R/W(W3C) ， 相 对 于 屏幕 的 鼠标 Y 坐 标 
和 据 标 相关 元 束 的 父 元 吉凶 
x( 仅 IE) te rs 人 
示 
y( 仅 |E) eer | 0 0 
示 
offsetX( 仅 
IE)layerX( 仅 Integer R 鼠标 相对 于 引起 事件 的 对 象 的 X 坐 标 
W3C) 
offsetY( 仅 
lIE)layerY( 仅 Integer R 鼠标 相对 于 引起 事件 的 对 象 的 Y 坐 标 
W3C) 
pageX( Integer - R 鼠标 相对 于 页 面 的 X 坐 标 
W3C) 
pageY( 仅 Integer -R 鼠标 相对 于 页 面 的 Y 坐 标 


W3C) 


属性 名 
altKey 


ctriKey 
shiftKey 


keyCode 


charCode( 仅 
W3C) 


所 光 


值 类 型 
Boolean 


Boolean 


Boolean 


Integer 


Integer 


R/W(IE)R(W3C) 


首 述 
true 表 示 按 下 了 ALT 键 ; false 表 示 没 有 
按 下 
true 表 示 按 下 了 CTROL ，false 表 示 没 有 
true 表 示 按 下 了 shift，false 表 示 没 有 


对 于 keypress 事 件 ， 表 示 按 下 按钮 的 
Unicode 字 符 ; 对 于 keydown/keyup 事 件 
， 表 示 按 下 按钮 的 数字 代号 


在 keypress 事 件 中 所 按键 的 字符 
Unicode 编 码 ， 如 果 不 是 字符 键 ， 则 该 
属性 为 0， 并 且 ， 当 CapsLock 打 开 与 关 
闭 时 charCode 的 值 也 对 应 着 大 小 写字 母 


属性 名 值 类 型 ， 卫 / 描述 


srcElement(IE)target(W3C) Element R 引起 事件 的 元 素 


某 些 鼠标 事件 中 (mouseover 与 


fromElement( 仅 IE) Element R en a 

某 些 鼠标 事件 中 (mouseover 与 
toElement( 仅 IE) Element R mouseoutj” 流标 所 迁 入 的 元 案 

某 些 鼠标 二 中 (mouseover 与 
relatedTarget( 仅 W3C) Element R 1 返回 与 事件 的 目标 节 

相关 的 节点 

如 果 不 断 触发 keydown 事 件 ， 则 为 
repeat( 仅 |E) Boolean R 亢 反 深 刘 入 但 忆 6 

乡 鞭 -这 # 示 ~ 消 2 加 了 
returnValue( 仅 |E) Boolean R/W 2 Re 
preventDefault( 仅 W3C) Function  R 执行 方法 以 取消 事件 的 默认 动作 
type String R 事件 的 名 称 ， 不 带 on 前 缀 

当 为 true 表 示 事 件 的 默认 动作 可 以 被 
caeeladlo oe, 0 取消 (用 preventDefault 方 法 取消 ) 
cancelBubble( 仅 |E) Boolean  R/W 将 其 设置 为 true 将 取消 事件 冒 泡 
stopPropagation( 仅 W3C) Function R 执行 方法 取消 事件 冒 泡 
bubbles( 仅 W3C) Boolean R 返回 true 表 示 事 件 是 冒 泡 类 型 

返回 事件 传播 的 当前 阶段 。 它 的 值 是 

下 面 的 三 个 常量 之 一 ， 它 们 分 别 表示 
eventPhase( 仅 W3C) Integer R 捕获 阶段 、 在 目标 对 象 上 时 和 起 泡 阶 

段 : 

| 常量 | 值 ||--- |--- || Event.CAPTURING_PHASE( 捕 获 阶 段 ) | 1|| Event.AT_TARGET( 在 目 


标 对 象 上 ) | 2 | | Event.BUBBLING_PHASE( 冒 泡 阶 段 ) | 3| 


| ltimeStamp ( 仅 W3C) |Long |R | 返回 一 个 时 间 改 。 指 示 发 生 事件 的 日 期 和 时 间 (从 epoch 
开始 的 毫秒 数 ) 。epoch 是 一 个 事件 参考 点 。 在 这 里 ， 它 是 客户 机 启动 的 时 间 。 并 非 所 有 系 
统 都 提供 该 信息 ， 因 此 ，timeStamp 属性 并 非 对 所 有 系统 /事件 都 是 可 用 的 。 | 


得 事件 对 象 及 取得 事件 目标 对 象 


document onclick =function (evt) { 

evt = evt || window.event;// 在 IE 中 evt 会 是 undefined 

// 而 支持 W3C DOM 事 件 的 浏 览 器 中 事件 对 象 将 会 作为 事件 处 理 函 数 的 第 一 个 参数 

var targetElement = evt.target || evt.srcElement; //IE 中 事件 对 象 没有 target 属 性 
}; 


阻止 事件 发 生 时 浏览 器 的 默认 行为 


document .onclick = function (evt) { 
evt = evt || window.event; var target = evt.target || evt.srcElement; If (!target 
} if (target.tagName=="A" && target.href) { // 使 用 传统 的 方法 取消 事件 默认 行为 必须 使 用 retl 
// 但 使 用 了 return ，, 骂 数 便 终 止 了 运行 ， 可 以 使 用 事件 对 象 来 取消 
if (window.event) {//IE 
window.event.returnValue = false; 
} else { 
evt.preventDefault(); 


y 
window.open(target.href, "newWindow"); // 这 样 让 所 有 的 链接 在 新 窗口 打开 





引 


事件 传播 一 一 冒 泡 与 捕获 


DOM 事 件 标准 定义 了 两 种 事件 流 ， 这 两 种 事件 流 有 着 显著 的 不 同 并 且 可 能 对 你 的 应 用 有 着 相 
当 大 的 影响 。 这 两 种 事件 流 分 别 是 捕获 和 冒 泡 。 和 许多 Web 技 术 一 样 ， 在 它们 成 为 标准 之 
前 ，Netscape 和 微软 各 自 不 同 地 实现 了 它们 。Netscape 选 择 实现 了 捕获 事件 流 ， We 则 实现 
了 冒 泡 事件 流 。 幸 运 的 是 ，W3C 决 定 组 合 使 用 这 两 种 方法 ,并 且 大 多 数 新 浏览 器 都 遵循 这 两 种 
事件 流 方 式 。 

默认 情况 下 ， 事 件 使 用 冒 泡 事 件 流 ， 不 使 用 捕获 事件 流 。 然 而 ， 在 Firefox 和 Safari 里 ， 你 可 以 
显 式 的 指定 使 用 捕获 事件 流 ， 方 法 是 在 注册 事件 时 传 入 useCapture 参 数 ， 将 这 个 参数 设 为 


true ° 








冒 泡 事件 流 


当 事 件 在 茶 一 DOM 元 素 被 触发 时 ， 例 如 用 户 在 客户 名 字 节 点 上 点 击 和 鼠标 ， 事 件 将 跟随 着 该 节 

点 继承 自 的 各 个 父 节点 冒 泡 穿 过 整个 的 DOM 节 点 层次 ， 直 到 它 遇 到 依附 有 该 事件 类 型 处 理 器 
的 节 点 ， 此 时 ， 该 事件 是 onclick 事 件 。 在 冒 ee 的 任何 时 候 都 可 以 终止 事件 的 冒 泡 ， 在 
遵从 W3C 标 准 的 浏览 器 里 可 以 通过 调用 事件 对 象 上 的 stopPropagation() 方 法 ， 在 Internet 
xplerer 以 通过 设置 事件 对 象 的 cancelBubble 属 性 为 ttue。 如 果 不 停 止 事件 的 传播 ， 事 件 
将 一 直通 过 DOM 冒 泡 直 至 到 达 文 档 根 。 


捕获 事件 流 

事件 的 处 理 将 从 DOM 层 次 的 根 开始 ， 而 不 是 从 触发 事件 的 目标 元 素 开 始 ， 事 件 被 从 目标 元 素 
的 所 有 祖先 元 素 依 次 往 下 传递 。 在 这 个 过 程 中 ， 事 件 会 被 从 文档 根 到 事件 目标 元 素 之 间 各 个 
继承 派生 的 元 素 所 捕获 ， 如 果 事 件 监 听 器 在 被 注册 时 设置 了 UseCapture 属 性 为 true, 那 么 它们 
可 以 被 分 派 给 这 期 间 的 任何 元 素 以 对 事件 做 出 处 理 ; 否则 ， 事 件 会 放 接 着 传递 给 派生 元 下 
径 上 的 下 一 元 素 ， 直 至 目标 元 素 。 事 件 到 达 目 标 元 素 后 ， 它 会 接着 通过 DOM 节 点 再 进行 


泡 。 


现代 事件 绑 定 方法 


针对 如 上 节 课 所 讨论 的 ， 使 用 传统 事件 绑 定 有 许多 缺陷 ， 比 如 不 能 在 一 个 对 象 的 相同 事件 上 
注册 多 个 事件 处 理 兄 数 。 而 浏览 器 和 W3C 也 并 非 没 有 考虑 到 这 一 点 ， 因 此 在 现代 浏览 器 中 ， 
它们 有 自己 的 方法 绑 定 事件 。 


W3C DOM 


。 obj.addEventListener(evtype,fn,useCapture) 一 一 W3C 提 供 的 添加 事件 处 理 函 数 的 方法 。 
obj 是 要 添加 事件 的 对 象 ，evtype 是 事件 类 型 ， 不 带 on 前 级 ， 和 和 是 事件 处 理 函 数 ， 如 果 
UseCapture 是 true， 则 事件 处 理 函数 在 捕获 阶段 被 执行 ， 否 则 在 冒 泡 阶 段 执行 

。 obj.removeEventListener(evtype,fn,useCapture) 一 一 W3C 提 供 的 删除 事件 处 理 函 数 的 方 
法 


微软 IE 方法 


。 obj.attachEvent(evtype,fn) 一 一 IE 提供 的 添加 事件 处 理 函 数 的 方法 。obj 是 要 添加 事件 的 对 
象 ，evtype 是 事件 类 型 ， 带 on 前 级 ， 和 是 事件 处 理 函 数 ，IE 不 支持 事件 捕获 
。 obj.detachEvent(evtype,fn,) 一 一 IE 提供 的 删除 事件 处 理 函 数 的 方法 ，evtype 包 含 on 前 组 


整合 两 者 的 方法 


function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) { 
obj.addEventListener(evtype,fn,useCapture); 
} else 1{ 
obj.attachEvent("on"+evtype,fn);//IE 不 支持 事件 捕获 
} else 1{ 
obj["on"+evtype]=fn;// 事 实 上 这 种 情况 不 会 存在 


} function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) { 
obj.removeEventListener(evtype,fn,useCapture); 
} else { 
obj.detachEvent("on"+evtype, fn); 
} else { 
obj["on"+evtype]=null; 


其 它 兼 容 性 问题 : IE 不 支持 事件 捕获 ? 很 抱 菊 ， 这 个 没有 办 法 解决 ! 但 IE 的 attach 方 法 有 个 问 
题 ， 就 是 使 用 attachEvent 时 在 事件 处 理 函 数 内 部 ，this 指 向 了 window， 而 不 是 obj ! 当然 ， 这 
个 是 有 解决 方案 的 ! 


function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) { 

obj.addEventListener(evtype,fn,useCapture); 

} else { 
obj.attachEvent("on"+evtype,function () { 

fn.call(obj); 

}); 

} else { 
obj["on"+evtype]=fn;// 事 实 上 这 种 情况 不 会 存在 


但 IE 的 attachEvent 方 法 有 另外 一 个 问题 ， 同 一 个 函数 可 以 被 注册 到 同一 个 对 象 同一 个 事件 上 
多 次 ， 解 决 方法 : 抛弃 IE 的 attachEvent 方 法 吧 ! IE 下 的 attachEvent 方 法 不 支持 捕获 ， 和 传统 
事件 注册 没 多 大 区 别 (除了 能 绑 定 多 个 事件 处 理 函 数 )， 并 且 候 的 attachEvent 方 法 存在 内 存 泄漏 


问题 ! 


addEvent,delEvent 现 代 版 


function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) {// 优 先 考 虑 W3C 事 件 
obj.addEventListener(evtype,fn,!!useCapture); 
} else {// 当 不 支持 addEventListener 时 (IE), 由 于 IE 同 时 也 不 支持 捕获 , 所 以 不 如 使 用 传统 事件 绑 定 
if (!fn. EventID) {fn. EventID = addEvent. EventHandlesCounter++;} // 为 每 个 


if (!obj., EventHandles) {obj. EventHandles={};} //_EventHandles 属 性 用 来 保存 月 


// 按 事件 类 型 分 类 
if (!obj., EventHandles[evtype]) {// 第 一 次 注册 某 事件 时 
obj. EventHandles[evtype]=[]; if (obj["on"+evtype]) {// 以 前 曾 用 传统 方式 注册 
(obj.__EventHandles[evtype][0]=obj["on"+evtype]). EventID=0;// 添 加 到 巴 
// 并 且 给 原来 的 事件 处 理 函数 增加 一 个 ID 


obj["on"+evtype]=addEvent .execEventHandles; // 当 事件 发 生 时 ，execEventHandle. 


} 


addEvent. EventHandlesCounter=1;// 计 数 器 , 0 位 预 留 它 用 
addEvent .execEventHandles = function (evt) {V// 遍 历 所 有 的 事件 处 理 函 数 并 执行 
if (!this. EventHandles) {return true;} 
evt = evt || window.event; var fns = this. EventHandles[evt.typel]; for (var i=0; 
fns[i].call(this); 
} 


}; function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) {// 先 使 ) 
obj.removeEventListener(evtype,fn,!!useCapture); 
} else { if (obj. EventHandles) { var fns = obj. EventHandles[evtype]; if (fns) 





标准 化 事件 对 象 


IE 的 事件 对 象 与 W3C DOM 的 事件 对 象 有 许多 不 一 样 的 地 方 ， 解 决 的 最 好 的 方法 就 是 调整 IE 的 
事件 对 象 ， 以 使 它 尽 可 能 的 与 标准 相似 ! 下 表 列 出 了 IE 事件 对 象 中 一 些 和 W3C DOM 名 称 或 什 
不 一 样 但 含义 相同 的 属性 


W3C DOM IE 


button 一 一 按键 编码 为 : 0- 左 
一 一 按键 编码 为 : 1- 堪 键 ，2- 右 键 ，4- 中 名 

键 ， 人 -中 键 ，2 右键 button 一 一 按键 编码 为 : 1- 左 键 ，2- 右 键 ，4- 中 键 
charCode 没有 对 应 属性 ， 但 可 以 用 keyCode 来 代替 

没有 对 应 方法 ， 但 可 以 将 event 对 象 的 returnValue 设 
preventDefault 为 false 来 模拟 
target SrcElement 
relatedTarget fromElement 与 toElement 


没有 对 应 方法 ， 但 可 以 通过 将 event 对 象 的 


ope ln cancelBubble 属 性 设 为 true 来 模拟 


总 结 出 fixEvent 远 数 


function fixEvent(evt) { if (!evt.target) { 
evt .target = evt.srcElement; 
evt.preventDefault = fixEvent.preventDefault; 
evt.stopPropagation = fixEvent.stopPropagation; if (evt.type == "mouseover") 
evt.relatedTarget = evt.fromElement; 
} else if (evt.type =="mouseout") { 
evt.relatedTarget = evt.toElement; 


} 
evt.charCode = (evt.type=="keypress")?evt.keyCode:0; 
evt.eventPhase = 2;//IE 仅 工作 在 冒 泡 阶 段 
evt .timeStamp = (new Date()).getTime();// 仅 将 其 设 为 当前 时 间 
} return evt,; 
fixEvent .preventDefault =function () { this.returnValue = false;// 这 里 的 this 指 向 了 某 个 事 
}; 
fixEvent.stopPropagation =function () { this.cancelBubble = true; 


小 


国 一 一 一 


fixEvent 辑 数 不 是 单独 执行 的 ， 它 必须 有 一 个 事件 对 象 参数 ， 而 且 只 有 事件 发 生 时 它 才 被 执 
行 ! 最 好 的 方法 是 把 它 整 合 到 addEvent 部 数 的 execEventHandles 里 面 





addEvent .execEventHandles = function (evt) {V// 遍 历 所 有 的 事件 处 理 函 数 并 执行 
if (!this. EventHandles) {return true;} 
evt = fixEvent(evt || window.event);// 在 这 里 对 其 进行 标准 化 操作 
var fns = this. EventHandles[evt.typel]; for (var i=0;i< fns.length;i++) { if (fn 
fns[i].call(this,evt);// 并 且 将 其 作为 事件 处 理 函 数 的 第 一 个 参数 
// 这 样 在 事件 处 理 函 数 内 部 就 可 以 使 用 统一 的 方法 访问 事件 对 象 了 





Load 事 件 


使 用 JavaScript 操 纵 DOM， 人 必须 等 待 DOM 加 载 完 毕 才 可 以 执行 代码 ， 但 window.onload 有 个 坏 
处 ， 它 非 要 等 到 页 面 中 的 所 有 图 片 及 视频 加 载 完 毕 才 会 触发 load 事 件 。 结 果 就 是 一 些 本 来 应 该 
在 打开 时 隐藏 起 来 的 元 素 ， 由 于 网 络 延迟 ， 在 页 面 打 开 时 仍然 会 出 现 ， 然 后 又 会 突然 消失 ， 
让 用 户 觉得 莫名 其 妙 。 必 须 与 这 种 五 隔 的 闪烁 告别 ! 


function addLoadEvent(fn) { var init = function() { if (arguments.callee.done) return,; 

arguments.callee.done = true; 
fn.apply(document,arguments); 

}; // 注 册 DOMContentLoaded 事 件 ， 如 果 支 持 的 话 

if (document.addEventListener) { 
document .addEventListener("DOMContentLoaded", init, false); 

} // 但 对 于 Safari， 我 们 需要 使 用 setInterval 方 法 不 断 检测 document , readyState 

// 当 为 loaded 或 complete 的 时 候 表 明 DOM 已 经 加 载 完 毕 

If (/WebKit/i.test(navigator.userAgent)) { var _timer = SetInterval(function() { 

clearIinterval(_timer); 
init(); 
} 

},10); 

} // 对 于 IE 则 使 用 条 件 注 释 ， 并 使 用 Script 标签 的 defer 属 性 

/VIE 中 可 以 给 Script 标签 添加 一 个 defer( 延 迟 ) 属 性 ， 这 样 ， 标 签 中 的 脚本 只 有 当 DOM 加 载 完 毕 后 才 执 行 

/x*Q@cc on @*/ 

/*Q@if (@ win32) 

document .write("<script id=\"_ ie onload\" defer=\"defer\" src=\"javascript:void 

var Script = document.getElementById("_ ie onload"); 

script.onreadystatechange = function() { 


If (this.readyState == "complete") { 
init(); 
} 
}; 
/*Q@end @*/ 


return true,; 


} 
和 于 王 == 普 3 





javascript 快 速 入 门 18-- 样 式 


修改 元 素 外 观 方 式 


修改 元 素 外 观 主要 有 下 面 3 种 方法 : 修改 ID， 修 改 className, 修 改元 素 的 Style 属性 
修改 ID ? 会 造成 多 么 混乱 的 结果 可 想 而 知 ! 


修改 className 确 实 是 非常 好 的 方法 ， 我 们 甚至 可 以 利用 CSS 层 个 ， 通 过 修改 body 的 
className 来 修改 整个 页 面 的 风格 ! 前 提 是 我 们 必须 写 特 定 的 CSS | 


/VCSS 代 码 
body.redStyle { border:2px solid red ; 
} body.redStyle * { color:red; 
} body.blueStyle { border:2px solid blue; 
} body.blueStyle * { color:blue; 
} 


//JS 代 码 
document .body.className="redStyle";// 切 换 为 “红粉 佳人 ”风格 
document .body .className="blueStyle";// 切 换 为 “蓝调 情怀 ”风格 


但 修改 className 也 并 非 那么 容易 ， 不 要 忘 了 className 可 以 有 多 个 的 1 所 以 不 管 添加 ， 测 试 
还 是 移 除 元 素 的 className， 都 要 小 心 ， 下 面 的 函数 可 以 造福 人 类 ! 


function hasClassName(obj,cn) { return (new RegExp("\\b"+cn+"\\b")).test(obj.className); 

} function addClassName(obj,cn) { return obj.className += " " + CNn;// 第 一 次 添加 时 ， 会 多 
// 但 不 用 担心 ， 浏 览 会 自动 将 其 清除 掉 

} function delClassName(obj,cn) { return obj.className = obj.className.replace(new RegEx 


} 
国王 普 s 卫 i 





元 素 的 style 属 性 ? 见 下 面 


Style 属 性 


可 以 在 元 素 的 style 属 性 上 应 用 CSS 规 则 ， 并 且 style 属 性 上 的 规则 优先 级 要 高 于 样式 表 中 的 规 
则 ， 因 此 ， 通 过 修改 元 素 的 style 属 性 来 修改 元 素 的 外 观 可 能 是 最 方便 并 且 是 最 有 效 的 方法 
了 。 


同 其 它 HTML 属 性 不 同 的 是 ， 元 素 的 style 属 性 是 一 个 对 象 ，CSS 的 属性 名 和 属性 值 分 别 映射 到 
了 style 对 象 的 属性 名 和 属性 值 ， 如 定义 对 象 的 style="color:red;"， 在 JavaScript 中 访问 时 就 可 
以 这 样 访问 : obj.style.color。 但 style 属 性 也 有 一 些 需 要 注意 的 地 方 ， 比 如 CSS 属 性 名 中 包含 
一 些 不 能 用 作 变 量 名 的 非法 字符 时 ， 在 JavaScript 中 访问 时 ， 会 自动 转换 成 驼峰 命名 式 。 


var 0Div=document .getElementById("oDiv") 
alert(oDiv.style.fontSize);// 自 动 驼峰 命 
// 如 果 要 直接 获取 style 属 ' 性 中 的 所 有 CSS 文 本 ， 则 en ne 
alert(oDiv.style.cssText); // 对 于 CSS 简 写 方 式 ， 各 个 浏览 器 返回 结果 出 现 分 歧 
alert(oDiv.style.border); // 需 要 分 别 获取 值 
alert (oDiyv. vs borderLeftColor );// 但 会 很 麻烦 
// 对 于 颜色 ， 火 狐 总 返回 RGB 表现 形式 ,但 设置 时 可 以 使 用 十 六 进 制 形式 
alert(oDiv.style.backgroundColor);// 火 狐 会 返回 rgb(x,y,z) 


加 是 元 素 的 style 属 性 仅仅 提供 了 内 联 样 式 所 定义 的 CSS 规 则 ， 而 不 能 反映 CSS 样 式 表 中 的 规 


//CSS 
#0Div { 
color :blue; 


} 
//HTIML <div id="oDiv">Div</div> //JS 
alert(document.getElementById("oDiv").style.color);// 空 的 


另外 ， 要 注意 的 是 ， 修 改元 素 的 style 属 性 时 ， 必 须 将 一 个 字符 串 赋 给 style 对 象 的 属性 ! 


oDiv.style.width = 120;// 错 误 的 ， 虽 然 在 IE 下 有 效果 
oDiv.style.fontSize="120%";// 正 确 


获取 实际 应 用 在 元 素 上 的 样式 


对 于 获取 元 素 的 实际 的 CSS 层 引 最 后 的 样式 ，IE 与 W3C DOM 存 在 分 歧 : IE 给 对 象 提供 了 一 个 
currentStyle 属 性 ， 它 的 使 用 0 性 ， 但 它 人 际 样 式 ， 而 

不 管 样式 是 内 联 的 还 是 在 外 部 样式 表 中 定义 的 ! W3C DOM | 使 用 一 个 全 局 方法 
getComputedStyle， 它 的 第 一 个 参数 为 要 检测 的 对 象 ， 第 二 个 参数 为 null (在 未 来 实现 ) ， 将 
返回 一 个 与 元 素 的 style 也 很 相似 的 对 象 ， 但 一 是 返 人 ， 二 是 它 对 
于 数值 型 属性 总 是 返回 像素 值 


alert(oDiv.currentStyle.width);//IE，currentStyle 保 留 原来 定义 在 CSS 中 的 单位 

alert(window.getcomputedStyle(oDiv,null).width);//W3C DOM, 并 且 总 是 返回 计算 后 的 像素 值 

// 另 外 ， 两 种 方式 都 不 能 获取 那些 CSS 简 写 方式 定义 的 ， 下 面 两 个 都 会 输出 空 
alert(oDiv,currentStyle.background ) ; 

alert(getComputedSstyle(oDiv,null).border); 


Cross-Browser 获取 元 素 实 际 样式 的 方式 


function getSstyle(obj,cn) { if (window.getComputedStyle) {//W3C DOM 
return window.getComputedStyle(obj,null)[cn]; 
} else if (obj.currentStyle) {//IE 
return obj.currentSstyle[cn]; 
re En 


样式 表 
DOM 也 提供 了 访问 外 部 样式 表 的 方法 ， 当 然 ， 也 有 无 奈 的 兼容 性 问题 ! 


向 页 面 添加 样式 表 


// 使 用 添加 节点 的 方法 
var lnk = document.createElement ("link"); 
lnk.type="text/css"; 
lnk.rel="styleSheet"; 
lnk.href="test.css"; var head = document.getElementsByTagName("head")[0]; 
head.appendChild(lnk); // 在 IE 下 不 能 使 用 ijnnerHTML 向 head 中 添加 HTML 代 码 的 方式 
// 另 一 种 方法 就 是 使 用 document .write 
document .write(""); 


访问 样式 表 


也 许 修改 个 别 元 素 的 样式 是 十 分 简单 的 ， 但 更 改 某 条 样式 表 规 则 (可 以 使 所 有 相关 元 素 都 发 
生变 化 ) ， 则 十 分 麻烦 ， 并 且 这 种 技术 只 有 Win 平 台 上 的 IE 与 火狐 才 支 持 ! 但 是 访问 样式 表 中 
的 CSS 规 则 仍然 是 有 办 法 的 ! 


alert(document.styleSheets);//document 对 象 的 StyleSheets 属 性 是 一 个 包含 了 所 有 的 样式 表 的 伪 数 组 
Var sheets = docuemtn.styleSheets; 

alert(sheets.length);//length 报 告 了 样式 表 的 个 数 

//style 标 签 出 现 一 次 或 使 用 1ink 标 签 链 入 CSS 一 次 就 算 作 一 个 样式 表 对 象 

var sheet1 = sheets[0];// 可 以 使 用 下 标 来 访问 


| 
样式 表 对 象 的 属性 


e type， 一 般 都 为 text/css 

e href，link 标 签 为 其 href 属 性 ， 而 style 标 签 则 为 空 

e。 id， 所 属 标签 的 ID 

。 disabled， 样 式 表 是 否 启用 ， 启 用 时 为 false 

。 cssText( 仅 |E)， 样 式 表 中 规则 的 文本 形式 

。 owningElement(IE)，ownerNode(W3C DOM)， 返 回 引 入 样式 表 的 那个 标签 
。 rules(IE),cssRules(W3C)， 对 应 样式 表 里 所 有 规则 的 集合 


Rule 对 象 属性 


e selectorText ， 选 择 符 
。 style ， 与 元 素 上 的 style 属 性 十 分 相似 ， 可 以 读 取 和 设置 CSS 规 则 ， 并 且 有 cssText 属 性 


修改 样式 表 


通过 styleSheets 访 问 到 的 样式 表 对 象 具有 一 些 方法 来 修改 其 中 的 样式 表 规 则 ， 但 这 些 方法 在 
各 个 浏览 器 中 不 一 样 。 火 狐 支 持 W3C 的 insertRule() 和 deleteRule() 方 法 。IE 使 用 专 有 的 
addRule() 和 removeRule() 方 法 。 而 其 它 浏览 器 则 不 支持 任何 一 个 。 


var sheet = document.styleSheets[0]; 
sheet .insertRule("body {color:blue;}",1);//W3C 方 法 ,第 一 个 参数 为 CSS 文 本 ,第 二 个 参数 为 位 置 , 从 0 
sheet.addRule("body", "color:blue;",1);//IE 方 法 ,第 一 个 参数 为 CSS 选 择 符 ,第 二 个 为 CSS 内 容 , 第 三 个 ; 
// 而 要 删除 某 条 规则 ， 则 只 能 通过 下 标 
sheet.removeRule(1);//IE 
sheet.deleteRule(1);//W3C 


| 





图 





Cross-Browser 总 结 苞 数 


function addCss(sheet, selectorText, declarations, index) { if (sheet.insertRule) { 
sheet.insertRule(selectorText+" {"+declarations+"}",index); 
} else if (sheet.addRule) { 
sheet.addRule(selectorText, declarations, index); 


} 
} function delCSS(sheet,index) { if (sheet.deleteRule) { 
sheet.deleteRule(index); 
} else { 
sheet.removeRule(index); 
} 


javascript 快 速 入 门 19-- 定 位 


元 过 大 可 


获取 元 素 尺 寸 可 以 使 用 下 面 几 种 方式 


元 素 的 style 属 性 width，height， 但 这 些 属 性 往往 返回 空 值 ， 因 为 它们 只 能 返回 使 用 行内 
style 属 性 定义 在 元 素 上 的 样式 

元 素 的 currentStyle 属 性 width，height (IE) ，getComputedStyle(obj,nul 由 返回 对 象 的 
width，height， 这 样 可 以 获取 元 素 的 实际 CSS 定 义 的 宽度 和 ea 但 当 元 素 没 有 使 用 
CSS 定 义 外 观 时 ， 虽 然 元 素 仍然 有 大 小 (只 要 其 中 有 字符 或 其 它 元 素 ) ， 这 些 属性 的 返 
回 值 是 不 确定 的 ， 如 IE 返回 auto, 而 火狐 则 返回 一 个 看 似 理想 的 入 。 

对 象 的 clientWidth 和 clientHeight 属 性 给 出 元 素 的 可 视 部 分 的 宽度 和 高 度 , 当 有 滚动 条 时 ， 
只 返回 可 见 区 域 大 小 ,对 于 块 级 元 素 , 将 返回 元 素 的 所 设置 的 宽度 和 高 度 加 上 填充 
(padding)， 这 一 点 几乎 所 有 浏览 器 都 达成 一 致 .但 当 块 级 元 素 并 没有 设置 宽 和 高 以 及 填充 
时 ,就 出 现 不 同 了 ,谷歌 浏览 器 和 大 览 器 的 报告 一 致 ,IE 报 告 都 为 0, 而 Opera 则 有 所 偏差 . 
再 将 这 两 个 属性 应 用 到 行内 元 素 上 ,IE 和 火狐 都 报告 为 0, 谷 歌 报 告 了 一 个 看 似 理 想 的 数字 ， 
而 Opera 竟 会 一 个 为 正 另 一 个 负 ! 

对 象 的 offsetWidth 和 offsetHeight 属 性 用 来 取得 对 象 在 页 面 中 的 实际 所 占 区 域 大 小 (所 设置 
的 宽 高 加 边框 加 填充 ， 当 有 滚动 条 时 还 会 算 上 滚动 条 ), 似 乎 这 个 属性 对 于 设置 了 宽 和 高 的 
块 级 元 素 几 乎 没有 什么 浏览 器 兼容 问题 ,但 不 得 不 说 的 是 火狐 的 一 个 BUG. 火 狐 浏 览 器 有 个 
可 将 页 面 放 大 缩小 的 功能 , 当 将 页 面 缩小 后 ,对 象 的 offsetWidth 和 offsetHeight 属 性 会 发 生 细 
微 的 变化 - 变 小 几 像素 ! 尽 管 这 对 JS 编程 来 讲 几乎 没 影响 ,但 似乎 这 个 BUG 也 太 明显 了 .这 两 
个 属性 变 非 总 是 那么 让 人 信任 , 当 对 象 并 没 设 置 宽 高 或 它 是 一 个 行内 元 素 时 , 它 的 报告 就 显 

得 相当 复杂 ,不 同 浏览 器 都 有 自己 一 套 标准 (但 是 仍然 可 以 肯定 的 是 这 两 个 属性 报告 的 仍然 
是 该 元 素 占 据 的 的 空间 大 小 ,只 不 过 会 因 字 体 和 空格 的 默认 大 小 不 同 而 不 同 ), 最 让 人 摸 不 着 
头脑 的 是 DB N00v 的 子 块 级 元 素 , 当 body 和 它 自身 没 设置 宽 高 时 ,Opera 报 告 的 
它 的 宽度 相当 大 ,6 千 多 像素 ! 

还 有 ee 了 ,就 目前 来 讲 , 对 于 一 个 没有 滚动 条 和 溢出 的 元 素 ,其 
浏览 器 对 这 个 属性 的 报告 还 算 有 规律 :对 象 的 clientWidth+border=scrollWidth. 对 象 的 
aah 有 IE 报告 有 问题 ! 它 以 元 素 中 的 内 容 为 准 ,如 果 元 素 内 
没有 其 它 内 容 ,虽然 IE 并 不 会 报 0, 但 会 报告 一 个 非常 小 的 值 ! 再 看 看 当 元 素 有 滚动 条 时 怎么 
样 吧 ! 唯 一 值得 高 兴 的 是 ,它们 对 有 滚动 条 的 元 素 的 clientWidth 和 clientHeight 都 报告 一 臻 
(但 仍 有 一 点 要 注意 , 那 就 是 火狐 的 一 BUG, 页 面 缩放 功能 带 来 的 郁闷 ,而 且 这 次 变化 非常 
ee 尽管 各 不 一 样 ,但 它们 对 
scrollWidth 不 知 为 什么 ,相差 不 大 ,那么 坏 的 就 是 ,scrollHeight 属 性 就 相差 太 大 了 , 没 规律 可 
tt eta 性 返 加 对 象 内 容 的 实际 所 需 空 间 , 当 元 素 设 置 了 overflow 值 
为 scroll 或 hidden 之 类 时 ,scrollWidth 和 scrollHeight 属 性 就 派 上 用 场 了 ,可 惜 的 是 它 问 题 太 


多 了 ) 


综 上 所 述 ， 对 于 一 个 在 CSS 中 定义 了 大 小 的 块 级 元 素 ， 获 取 它 的 实际 大 小 是 很 简单 的 ， 但 对 
于 没有 定义 宽度 和 高 度 ， 或 是 一 行内 元 素 时 ， 则 没有 跨 浏 览 器 的 解决 方案 可 以 获取 它 的 实际 
大 小 |! 


窗口 视 口 宽 度 和 高 度 


对 于 窗口 视 口 ( 视 口 指 显示 页 面 的 那 部 分 ) 的 大 小 ，Mozilla 提 供 了 window.innerWidth 与 
window.innerHeight 两 个 属性 ， 而 IE 则 没有 相对 应 的 属性 ， 但 可 以 使 用 
document.documentElement.clientWidth 与 document.documentElement.clientHeight 两 个 属 
性 来 获取 ! 另外 ， 对 于 IE6 之 前 的 版 本 ， 则 需要 使 用 document.body 的 clientWidth 与 
clientHeight 属 性 ! 


// 获 取 视 口 大 小 ， 依 次 为 火狐 ，IE6 及 IE6 以 上 的 版 本 ，IE6 以 下 的 版 本 
var w = window.innerwidth || document .documentE1Lement .clientwidth || document ,body,cl 
// 而 同时 其 实 火狐 也 支持 通过 document .documentElement 的 clientwidth, clientHeight 属 性 获取 视 口 大 小 
// 完 全 全 可 以 不 做 任何 浏览 响 器 检测 
w = document .documentElLement .clLientwidth ， 
h = document.documentElement.clientHeight; 


二 





元 素 边 框 宽 度 
获取 元 素 边框 宽度 可 以 使 用 下 面 几 种 方式 


e 元 素 style 属 性 的 borderWidth， 但 同样 它 只 能 返回 使 用 HTML 行 内 style 属 性 定义 的 边框 样 
式 

。 使 用 currentStyle 属 性 或 getComputedStyle 方 法 ， 可 以 获取 元 素 CSS 定 义 的 实际 边框 样 
式 ， 如 果 CSS 没 有 定义 元 素 的 边框 ， 一 般 的 元 素 是 没有 边框 的 ， 但 部 分 元 素 ， 如 表单 控 
件 ， 仍 然 具 有 默认 的 边框 宽度 ! 对 于 此 类 情况 ， 也 是 不 能 依靠 这 种 方法 来 获取 元 素 的 边 
框 大 小 的 ! 

e 对 象 的 clientLeft 和 clientTop 属 性 。 不 能 不 说 clientLeft 和 clientTop 的 名 字 起 的 太 奇 怪 了 , 事 
实 上 它们 的 名 字 更 应 该 这 样 :clientBorderLeftWidth 和 clientBorderTopWidth( 难 道 是 太 长 了 
的 原因 ?); 更 奇怪 的 是 ,它们 只 能 取得 设置 在 元 素 上 的 左边 框 和 上 边框 的 粗细 ,而 没有 返回 右 
人 宽度 的 属性 ! 另 外 ,对 于 文档 根 元 素 (documentElement), 在 IE 中 它 有 默认 的 
两 像素 边框 宽度 ,而 其 它 浏览 器 中 报告 为 0. 


元 素 坐 标 


获取 元 素 坐 标 方法 : 


e 元 素 style 属 性 的 lefttop 属 性 ， 不 但 这 种 方法 仅 适 用 于 使 用 HTML style 属 性 声明 样式 的 元 


素 ， 并且 只 有 当 元 素 使 用 定位 (position 设 置 为 relative,absolute,fixed, 但 不 包含 static) 
时 ， 才 会 存在 这 些 值 

。 元 素 currentStyle 属 性 或 getComputedStyle 方 法 返回 的 Style 对 象 的 left,top 属 性 ， 但 这 种 方 
法 仅 对 采用 定位 的 元 素 有 作用 

e 元 素 的 offsetLeft 与 offsetTop 属 性 返回 元 素 在 页 面 中 相对 于 父 元 素 的 坐标 。 一 般 对 于 进行 
了 定位 的 元 素 〈 即 position 为 不 是 static 的 值 或 没有 设置 ) ， 这 两 个 属性 的 返回 值 为 CSS 中 
定义 的 元 素 的 left,top 值 ， 当 其 自身 有 边 距 时 (margin) ， 还 会 加 上 边 距 。 而 对 于 没有 采 
用 定位 的 元 素 则 显得 比较 复杂 ， 我 们 只 能 考虑 下 设置 了 宽度 和 高 度 的 块 级 元 素 ， 因 为 没 
有 设置 宽 高 ， 及 行内 元 素 ， 没 有 办 法 获取 它 的 宽 高 ， 即 使 能 获取 它 的 left，top 值 也 显得 无 
意义 了 。 对 于 没有 采用 定位 的 块 级 元 素 ，offsetLeft 与 offsetTop 属 性 将 返回 其 自身 的 
margin+ 父 元 素 的 padding。 元 素 还 有 个 offsetParent 属 性 返回 元 素 的 相对 定位 的 父 元 素 ， 
当 使 用 定位 时 ， 各 个 浏览 器 一 致 ， 并 且 和 CSS 里 设置 的 吻合 ， 当 不 使 用 定位 时 ， 父 元 素 
是 WHO 成 了 问题 ， 各 个 浏览 器 认识 不 一 样 ，IE 报 告 为 其 父 节点 ， 而 其 它 浏览 器 则 报告 为 
body， 当 然 ， 这 次 IE 正确 了 。 另 外 ， 对 于 表格 中 的 一 些 元 素 ， 不 应 对 其 进行 定位 ! 


具有 滚动 条 时 的 定位 


scrollLeft 和 scrollTop, 它 们 用 来 获得 那些 具有 滚动 条 的 元 素 滚 动 条 滚动 的 距离 ,而 没有 滚动 条 的 
元 素 , 它 总 返回 0. 可 以 这 样 认 为 ,这 两 个 属性 报告 了 有 滚动 条 元 素 中 未 显示 的 左 一 部 分 的 宽 
(scrollLeft) 和 上 一 部 分 的 高 (scrollTop). 而 对 于 页 面 的 滚动 条 ， 则 取 documentElement 的 
scrollLeft 与 scrollTop 属 性 ， 但 是 对 于 谷歌 浏览 器 ， 它 会 将 页 面 的 滚动 条 视 为 document.body 
的 | 


Event 对 象 与 定位 相关 的 属性 


clientX 与 clientY 返 回 事 件 发 生 时 鼠标 在 视 口 中 的 坐标 ; offsetX 与 offsetY 返 回 事件 发 生 时 鼠标 

相对 于 目标 对 象 的 坐标 ， 以 目标 对 象 右 上 角 为 坐标 原点 ， 而 这 两 个 属性 的 W3C DOM 版 本 则 为 
layerX 与 layerY ; pageX 与 pageY 返 回 事件 发 生 时 鼠标 相对 于 页 面 的 坐标 ， 虽 然 这 个 属性 IE 不 
支持 ， 但 仍然 有 补救 的 余地 ! 


// 不 要 在 每 个 事件 处 理 函 数 中 进行 判断 ， 而 要 善于 利用 之 前 的 fixEvent 函 数 ! 
function fixEvent(evt) { if (!evt.target) { // 函 数 中 已 有 的 部 分 
evt .pageX = evt.clientX+document.documentElement.scrollLeft,; 
evt .pageY = evt.clientY+document.documentElement.scrollTop; // 可 以 将 事件 发 生 时 和 鼠 
evt .LayerX = evt.offsetxXx; 
evt ,LayerY = evt.offsety; 
} return evt 


} 
f= 





拖 动 


最 简单 的 拖 动 脚本 一 一 拖 动 的 基本 原理 


window.onload = function () { var oDiv = document.getElementById("oDiv");//oDiv 必 须 使 月 
oDiv.onmousedown = drag; function drag(evt) { 
evt = evt || window.event; this.onmouseup = drop; this.onmousemove = moveDiyv,; 
x:evt.offsetX || evt,1LayerX， 
y:evt.offsetY || evt.layerY 


} function moveDiv(evt) { 
evt = evt || window.event; this.style.left = evt.clientX-this.offset.x+"px"; 
} function drop(evt) { this.onmouseup = null; this,onmousemove = null; 
} 
}; 


i 








javascript 快 速 入 门 20--Cookie 


Cookie 基础 知识 


我 们 已 经 知道 ， 在 document 对 象 中 有 一 个 cookie 属性 。 但 是 Cookie 又 是 什么 ?“ 某 些 Web 
站 点 在 您 的 硬盘 上 用 很 小 的 文本 文件 存储 了 一 些 信息 ， 这 些 文件 就 称 为 Cookie。” MSIE 
帮助 。 一 般 来 说 ，Cookies 是 CGI 或 类 似 ， 比 HTML 高 级 的 文件 、 程 序 等 创建 的 ， 但 是 
JavaScript 也 提供 了 对 Cookies 的 很 全 面 的 访问 权利 。 





在 继续 之 前 ， 我 们 先 要 学 一 学 Cookie 的 基本 知识 。 


每 个 Cookie 都 是 这 样 的 : cookie 名 =cookie 值 ; cookie 本 身 仅 仅 是 一 个 字符 串 ， 是 一 组 名 值 
对 ;多 组 名 值 对 用 分 号 加 空格 分 隔 ! 


"cookie 名 "的 限制 与 JavaScript 的 命名 限制 大 同 小 异 ， 少 了 "不 能 用 JavaScript 关键 字 ”， 多 
了 “只 能 用 可 以 用 在 URL 编码 中 的 字符 ”。 后 者 比较 难 懂 ， 但 是 只 要 你 只 用 字母 和 数字 命名 ， 
就 完全 没有 问题 了 。* 值 "的 要 求 也 是 * 只 能 用 可 以 用 在 URL 编码 中 的 字符 ”。 


Cookie 都 有 失效 日 期 ， 一 旦 电脑 的 时 钟 过 了 失效 日 期 ， 这 个 Cookie 就 会 被 删 掉 。 我 们 
能 直接 删 掉 一 个 Cookie， 但 是 可 以 用 设 定 失效 日 期 早 于 现在 时 刻 的 方法 来 间接 删 掉 它 。 


每 个 网 页 ， 或 者 说 每 个 站 点 ， 都 有 它 自己 的 Cookies， 这 些 Cookies 只 能 由 这 个 站 点 下 的 网 
页 来 访问 ， 来 自 其 他 站 点 或 同一 站 点 下 未 经 授权 的 区 域 的 网 页 ， 是 不 能 访问 的 。 每 

一 “组 "Cookies 有 规定 的 总 大 小 (大约 2KB 每 “组 ") ， 一 超过 最 大 总 大 小 ， 则 最 早 失效 的 
Cookie 先 被 删除 ， 来 让 新 的 Cookie“ 安 家 ”。 


人 坊 问 Cookie 


document .write(document.cookie);// 输 出 类 似 "name1l=value1; name2=value2; name3=value3" 的 : 
document .write(typeof document.cookie); //cookie 仅 仅 是 个 字符 囊 





这 样 获 取 到 的 是 一 堆 混 乱 的 字符 事 ， 必 须 对 其 进行 处 理 才 能 知道 它 的 含义 ! 在 类 似 ASP 或 
PHP 这 样 的 服务 器 端 脚本 中 ， 往 往 设置 cookie 十 分 简单 
//ASP 
response.cookies("cookieName")="cookieValue" 


//PHP 
setcookie("cookieName", "cookieValue"); 


解析 Cookie 名 值 对 


方案 一 : 直接 截取 字符 串 


function getCookie(cookieName) { var start = document.cookie.indexOof(cookieName+"="); if 
start = start+cookieName.length+1; var end = document.cookie.indexof(";",start); 








} 
<| 加 
方案 二 : 将 Cookie 拆 分 为 数组 ， 通 过 遍历 取得 
function getCcookie(cookieName) { var cookies=document.cookie.split(";");// 一 个 分 号 加 一 个 
If (!cookies.length) {return "";} var pair=["",""]; for (var i=0;i< cookies. ee 
pair = cookies[i] .split("=");// 以 赋值 号 分 隔 , 第 一 位 是 Cookie 名 ,第 二 位 是 Cookie 信 
If (pair[0]==cookieName) { break; 
} return pair[1]; 
} 





: 使 用 正则 表达 式 解析 


function getCookie(cookieName) { var re = new RegExp("\\b"+cookieName+"=([^;]*)\\b"); va 


} 
国宝 童 宣 痢 





设置 Cookie 
一 个 Cookie 包 含 以 下 信息 : 


e。 Cookie 名 称 ，Cookie 名 称 必须 使 用 只 能 用 在 URL 中 的 字符 ， 一 般 用 字母 及 数字 
e。 Cookie 值 ，Cookie 值 同样 也 只 能 使 用 可 以 用 在 URL 中 的 字符 ， 一 般 需 要 在 设置 Cookie 值 
时 对 其 使 用 encodeURI 方 法 进行 转 义 
。 Expires， 过 期 日 期 ， 一 个 GMT 格 式 的 时 间 ， 当 过 了 这 个 日 期 之 后 ， 浏 览 器 就 会 将 这 个 
Cookie 删 除 掉 ， 当 不 设置 这 个 的 时 候 ，Cookie 在 浏览 器 关闭 后 消失 
e Path， 一 个 路 径 ， 在 这 个 路 径 下 面 的 页 面 才 可 以 访问 该 Cookie， 一 般 设 为 "”， 以 表示 同 
一 个 站 点 的 所 有 页 面 都 可 以 访问 这 个 Cookie 
e。 Domain， 子 域 ， 指 定 在 该 子 域 下 才 可 以 访问 Cookie， 例 如 要 让 Cookie 在 bbs.x-life.com 下 
可 以 访问 ， 但 在 news.x-life.com 下 不 能 访问 ， 则 可 将 domain 设 置 成 bbs.x-life.com 
e。 Secure， 安 全 性 ， 指 定 Cookie 是 否 只 能 通过 https 协 议 访 问 ， 一 般 的 Cookie 使 用 HTTP 协 
议 既 可 访问 ， 如 果 设 置 了 Secure (没有 值 ) ， 则 只 有 当 使 用 https 协 议 连 接 时 cookie 才 可 
以 被 页 面 访问 
注意 : Cookie 安 全 机 制 要 求 站 点 页 面 只 能 访问 本 站 点 的 Cookie， 不 能 访问 其 它 站 点 的 
Cookie。 同 时 ， 最 好 在 设置 Cookie 时 使 用 encodeURI 对 象 进行 URI 编 码 ， 在 取出 Cookie 时 再 
使 用 decodeURI 对 其 进行 解码 ! 
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设置 一 个 完整 Cookie 示 例 


Var expires = new Date(); 
expires.setMonth(expires.getMonth()+1);// 一 个 月 后 Cookie 失 效 
document .cookie = "userName="+encodeURI(" 用 户 名 ")+"; expires="+ expires.toGMTString()+ 


加 | 








每 次 设置 document.cookie 值 时 如 果 该 Cookie 名 称 并 不 存在 ， 则 新 增 一 个 Cookie， 如 果 已 经 存 
在 ， 则 修改 以 前 的 值 ! 


document .cookie 
document .cookie 
document .cookie 


"a=1";// 新 增 一 个 名 称 为 a 的 Cookie 
"b=2";// 新 增 一 个 名 称 为 b 的 Cookie， 原 来 的 Cookie 安 然 无 羡 
"a=3";// 将 原来 的 名 称 为 a 的 Cookie 值 修改 为 3 


setCookie 忒 数 


function setCookie(name,value,expires,domain,secure) { var str = name+"="+encodeURI(valu 
if (expires) { 
str += "; expires="+expires.toGMTString(); 
} if (path) { 
str += "; path="+path; 
} if (domain) { 
str += "; domain="+domain; 
} if (secure) { 
St r= SeCUnen, 
} 


document .cookie = str; 


} 
ES 于 





删除 Cookie 
没有 删除 Cookie 的 直接 的 方法 ， 但 可 以 变通 一 下 来 删除 Cookie ! 


function delCookie(cookieName) { var expires = new Date(); 
expires.setTime(expires.getTime()-1);// 将 expires 设 为 一 个 过 去 的 日 期 ， 浏 览 器 会 自动 删除 它 
document .cookie = cookieName+"=; expires="+expires.toGMTString(); 


} 
可 | 


javascript 快 速 入 门 21--DOM 总 结 


跨 浏览 器 开发 


市 场 上 的 浏览 器 种 类 多 的 不 计 其 数 ， 它 们 的 解释 引擎 各 不 相同 ， 期 待 所 有 浏览 器 都 一 致 的 支 
持 JavaScript,CSS,DOM, 那 要 等 到 不 知 什么 时 候 ， 然 而 开发 者 不 能 干 等 着 那天 。 历 史上 已 经 有 
不 少 方法 来 解决 浏览 器 兼容 问题 了 ， 主 要 分 为 两 种 : 1.userAgent 字 符 串 检测 ，2. 对 象 检测 ; 
当然 ， 也 不 能 考虑 所 有 的 浏览 器 ， 我 们 需要 按照 客户 需求 来 ， 如 果 可 以 确信 浏览 网 站 的 用 户 
都 使 用 或 大 部 分 使 用 IE 浏览 器 ， 你 大 可 放心 的 使 用 |E 专 有 的 那些 丰富 的 扩展 ， 当 然 ， 一 旦 
用 户 开始 转向 另 一 个 浏览 ， 那 么 痛苦 的 日 子 便 开始 了 。 下 面 是 市 场 上 的 主流 浏览 器 列表 : 


。 Internet Explorer 
e Mozilla Firefox 
e。 Google Chrome 
。 Opera 

。 Safari 


注意 ， 浏 览 器 总 是 不 断 更 新 ， 我 们 不 但 要 为 多 种 浏览 器 作 兼容 处 理 ， 还 要 对 同一 浏览 器 多 个 
版 本 作 兼 容 处 理 。 比 如 |E 浏 览 器 ， 其 6.0 版 本 和 7.0 版 本 都 很 流行 ， 因 为 微软 IE 随 着 操作 系统 乡 
定安 装 〈 之 前 也 是 同步 发 行 ， 微 软 平 均 每 两 年 推出 一 款 个 人 桌面 ， 同 样 上 E 也 每 两 年 更 新 一 

次 ; 直到 现在 ， 由 于 火狐 的 流行 ，IE 工 作 组 才 加 快 IE 的 更 新 ) ， 所 以 更 新 的 较 慢 ，6.0 版 和 7.0 
版 有 很 大 差别 。 


- 


市 场 上 还 存在 一 些 其 它 浏览 器 ， 但 由 于 它们 都 是 使 用 的 上 面 所 列 浏览 
览 器 使 用 了 相同 的 解释 引擎 ， 所 以 无 需 多 作 考 虑 。 下 面 是 主流 的 浏览 器 


的 核心 ， 或 与 上 面 浏 
解释 引擎 列表 : 


ks 
4 及 


M3 


1. Trident 


Trident (又 称 为 MSHTML) ， 是 微软 的 窗口 操作 系统 (Windows) 搭载 的 网 页 浏览 器 一 
Internet Explorer 的 排版 引擎 的 名 称 ， 它 的 第 一 个 版 本 随 着 1997 年 10 月 Internet Explorer 
第 四 版 释 出 ， 之 后 不 断 的 加 入 新 的 技术 并 随 着 新 版 本 的 Internet Explorer 释 出 。 在 未 来 最 
新 的 Internet Explorer 第 七 版 中 ， 微 软 将 对 Trident 排 版 引擎 做 了 的 重大 的 变动 ， 除 了 加 入 
0 并 增加 对 网 页 标准 的 支持 。 尽 管 这 些 变动 已 经 在 相当 大 的 程度 上 落后 了 

它 的 排版 引擎 。 使 用 该 引擎 的 主要 浏览 器 : IE，ThewWorld ，MinilIE，Maxthon ， 腾 讯 
TT 浏览 览 器 。 事 实 上 ， 这 些 浏览 器 是 直接 使 用 了 IE 核心 ， 因 为 其 userAgent 字 符 串 中 返回 的 
信息 与 此 是 一 模 一 样 的 ! 


2. Gecko 


壁虎 ， 英 文 为 "Gecko"。Gecko 是 由 Mozilla 基 金 会 开发 的 布局 引擎 的 名 字 。 它 原本 叫 作 
NGLayout。Gecko 的 作用 是 读 取 诸如 HTML、CSS、XUL 和 JavaScript 等 的 网 页 内 容 ， 并 
呈现 到 用 户 屏幕 或 打印 出 来 。Gecko 已 经 被 许多 应 用 程序 所 使 用 ， 包 括 若干 浏览 器 ， 例 如 
Firefox、Mozilla Suite、Camino,Seamonkey 等 等 


3. Presto 


Presto 是 一 个 由 Opera Software 开 发 的 浏览 器 排版 引擎 ， 供 Opera 7.0 及 以 上 使 用 。 
Presto 取 代 了 昌 版 Opera 4 至 6 版 本 使 用 的 Elektra 排 版 引擎 ， 包 括 加 入 动态 功能 ， 例 如 网 
页 或 其 部 分 可 随 着 DOM 及 Script 语法 的 事件 而 重新 排版 。Presto 在 推出 后 不 断 有 更 新 版 本 
推出 ， 使 不 少 错误 得 以 修正 ， 以 及 阅读 Javascript 效 能 得 以 最 佳 化 ， 并 成 为 速度 最 快 的 引 


4. KHTML 


是 HTML 网 页 排版 引擎 之 一 ， 由 KDE 所 开发 。KDE 系 统 自 KDE2 版 起 ， 在 档案 及 网 页 浏览 
器 使 用 了 KHTML3 引 擎 。 该 引擎 以 C++ 编 程 语 言 所 写 ， 并 以 LGPL 授 权 ， 支 援 大 多 数 网 页 浏 
览 标准 。 由 于 微软 的 Internet Explorer 的 占有 率 相 当 高 ， 不 少 以 FrontPage 制 作 的 网 页 均 
包含 只 有 |E 才 能 读 取 的 非 标准 语法 ， 为 了 使 KHTML3 引 擎 可 呈现 的 网 页 达到 最 多 ， 部 分 |E 
专属 的 语法 也 一 并 支援 。 目 前 使 用 KHTML 的 浏览 器 有 Safari 和 Google Chrome。 而 
KHTML 也 产生 了 许多 衍生 品 ， 如 : WebKitiWebCore 引 擎 


利用 userAgent 检 测 


下 面 是 各 大 浏览 器 使 用 弹 窗 显 示 的 UserAgent 字 符 串 


IE 浏览 器 : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727) 


| BW Intermet Exzplorer 





火狐 浏览 器 : Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) 
Gecko/2008102920 Firefox/3.0.4 


EWERIG Si 


Mozillar5.0 Windows; U; Windows HT 5.1; zh-CH: rv:1.9.0.4) Gecko/2008102920 
Firefox/3.0.4 





Opera 浏 览 器 : Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1 


Javascr1ipt 


docalhost> 
Cy Dperai/g.B4 Windows HT 5.1; U; Edition IBIS; zrh-en) 


Presto/2.1.1 


| 停止 执行 此 页 面 中 的 脚本 





II 到 


Safari 浏 况 先 : Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 
(KHTML, like Gecko) Version/4.0 Safari/528.16 


JavaScript 
Mozilla/5.0 (Windows: U;: Windows NT 5.1;: zh-CN) 


AppleWebKit/528. 16 {KHIMYL, like Gecko) Version/4.0 
Safari/528. 16 





Google Chrome 浏 览 器 : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) 
AppleWebKit/530.5 (KHTML., like Gecko) Chrome/2.0.172.33 Safari/530.5 


Javascript 


Mozillar5.0 Windows; U; Windows NT 5.1; enrUs) 
hppleWebKit/530.5 (KHIML, like Gecko) 


Chrome/2.0.172.33 Safari/530.5 





可 以 使 用 下 面 的 代码 进行 浏览 器 检测 


Var Browser = { 
isIE:navigator.userAgent.indexOf("MSIE")!=-1, 
isFF:navigator.userAgent.indexof("Firefox")!=-1, 
isOpera:navigator.userAgent.indexof("Opera")!=-1, 
isSafari:navigator.userAgent.indexof("Safari")!=-1 }; 


但 这 样 做 并 不 是 万 无 一 失 的 ， 一 个 特例 便 是 Opera 可 以 使 用 userAgent 伪 装 自己 。 下 面 是 伪装 
成 IE 的 userAgent : Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) 
Gecko/20061208 Firefox/2.0.0 Opera 9.64 ; 在 完全 伪装 的 情况 下 ， 最 后 的 “Opera 9.64” 这 个 
字符 串 也 不 会 出 现 ， 但 Opera 也 有 特殊 的 识别 自身 的 方法 ， 它 会 自动 声明 一 个 opera 全 局 变 


号 | 


里 


不 但 如 此 ， 我 们 的 检测 还 忽略 了 一 点 ， 就 是 那些 使 用 相同 引擎 而 品牌 不 同 的 浏览 器 ， 所 以 ， 
直接 检测 浏览 器 是 没有 必要 的 ， 检 测 浏览 器 的 解释 引擎 才 是 有 必要 的 ! 


Var Browser = { 
isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera, 
isGecko:navigator.userAgent.indexOof("Gecko")>-1 && !window,opera && navigator.use 
isKHTML :navigator .userAgent.indexof ("KHTML")>-1, 
isOpera:navigator .userAgent.indexof ("Opera")>-1 }; 
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对 参 检测 


浏览 器 检测 就 到 此 结束 了 ， 下 面 应 该 讲 一 下 对 象 检 测 ! 对 象 检测 其 实 是 比 浏览 器 检测 更 加 有 
效 更 加 科学 方法 ， 而 且 我 们 之 前 一 直 在 使 用 ! 








function addEvent(obj,evtype,bubbles) { if (obj.addEventListener) {....} else if (obj.at 
} 


二 严守 





对 象 检 测 避 免 了 浏览 器 引擎 的 多 样 性 ， 即 当 我 们 需要 某 种 功能 时 ， 我 们 直接 检测 浏览 器 是 否 
支持 该 功能 ， 而 不 用 管 浏览 器 是 什么 牌子 的 ! 


九 如 


什么 时 候 该 使 用 浏览 器 检测 ? 什么 时 候 该 使 用 对 象 检测 ? 


答案 是 能 使 用 对 象 检测 时 总 该 使 用 对 象 检测 ， 只 有 当 必 须 对 浏览 器 进行 识别 或 无 法 使 用 对 象 
仿 测 时 才 进 行 UserAgent 判 断 


// 一 段 用 于 将 当前 页 面 添加 到 用 户 收藏 夹 的 代码 ,两 个 不 同 的 版 本 
window.external.addFavorite(location, "收藏 页 面 ");//IE 
window.sidebar.addPanel(" 收 藏 页 面 ", location,"");// 火 狐 
// 由 于 在 火狐 下 window 也 具有 external 属 性 ， 并 且 在 IE 下 判断 window. external.addFavorite 会 出 错 
if (window.external. a {...}// 代 码 在 IE 下 会 出 错 
// 可 以 使 用 浏览 器 检测 ， 避 免 意外 
If (Browser.isIE) { 

window.external.addFavorite(location, "收藏 页 面 ");//IE 
} else if (Browser.isGecko) { 

window.sidebar .addPanel(" 收 藏 页 面 ", location,"");// 火 狐 及 其 它 相 同 引 擎 的 浏览 器 
} 


当 你 的 脚本 和 其 它 脚 本 一 起 工作 时 (尤其 和 那些 有 问题 的 脚本 ) ， 有 时 候 需 要 同时 使 用 对 象 
检测 与 浏览 器 检测 


// 对 于 window.innerwidth 这 些 属性 , 可 能 有 些 脚本 会 创建 一 个 兼容 多 个 浏览 器 的 同名 属性 
if (isIE) {// 它 聪明 的 使 用 了 浏览 器 相 仿 测 
window.onresize = function () { 
window.innerwidth =document.documentElement.clientWwidth,; 
window.innerHeight = document.documentElement.clientHeight; 
}; 
window.onresize(); 
} // 然 而 我 们 的 脚本 对 其 进行 检测 时 就 麻烦 了 
if (window.innerwidth) {// 仅 当 在 FF 下 时 (FF 支持 position:fixed) 才 这 样 做 
obj.style.position="fixed"; 
obj.style.right=window.innerwWidth/2+"px"; 
obj.style.bottom=window.innerWidth/2+"px"; 


当然 ， 使 用 浏览 器 检测 始终 是 困难 重重 的 ， 而 对 于 测试 文档 是 否 支持 某 种 特性 ， 使 用 对 象 检 
测 可 能 是 最 有 效 的 ， 还 有 另 一 种 方法 可 以 直接 测试 浏览 器 是 否 支持 茶 标准 ! 


测试 与 DOM 标 准 的 一 致 性 


document 对 象 有 个 implementation 属 性 ， 该 属性 只 有 一 个 方法 hasFeature(), 用 来 测试 浏览 器 
是 否 支持 某 个 DOM 标 准 ! 


// 测 试 是 否 支 持 XML DOM 1.0 


var supportXML = document.implementation.hasFeature("XML", "1.0"); 
特征 错过 

Core 2 基本 的 DOM， 给 予 了 用 层次 树 来 表示 文档 的 能 

xML (0) 核心 的 XML 扩 展 ， 增 加 了 对 CDATA Section、 处 理 指令 
2.0，3.0 和 实体 的 支持 

HTML 1 et ， 增 加 了 对 HTML 特 定 元 素 和 实体 的 

Views 2.0 基于 特定 样式 完成 对 文档 的 格式 化 

StyleSheets 2.0 为 文档 关联 样式 表 

CSS 2.0 支持 级 联 样式 表 1 (CSS Level 1) 

CSS2 2.0 支持 级 联 样 式 表 2 (CSS Level 2) 

Events 2.0 通用 DOM 事 件 

UIEvents 2.0 用 户 界 面 事件 

MouseEvents 2.0 由 和 鼠标 引起 的 事件 〈 点 击 、 和 鼠标 经 过 ， 等 等 ) 

MutationEvents «& 2.0 当 DOM 树 发 生 改 变 时 引发 的 事件 

HTMLEvents 0 HTML 4.01 的 事件 

Range 2.0 操作 DOM 树 中 某 个 特定 范围 的 对 象 和 方法 

Traversal 2.0 遍历 DOM 树 的 方法 

LS 3.0 在 文件 和 DOM 树 之 间 同 步 地 载 入 和 存储 

LS-Async 3.0 在 文件 和 DOM 树 之 问 异 步 地 载 入 和 存储 

Validation 3.0 用 于 修改 DOM 树 之 后 仍然 保持 其 有 效 性 的 方法 





尽管 这 个 相当 方便 ， 但 是 ， 使 用 implementation. 。 明显 的 缺陷 决定 DOM 
实现 是 否 对 DOM 标 准 的 不 同 的 部 分 相 一 致 的 ， 正 是 去 进行 实现 的 人 (或 公司 ) 。 要 让 这 个 方 
法 对 于 任何 值 都 返回 true， 那 是 很 简单 的 ， i “这 个 DOM 实 现 盖 的 和 所 有 的 标 


准 都 一 至 了。 目前 为 止 ， 最 精确 的 浏览 器 要 数 Mozilla， 但 它 多 少 也 有 一 些 并 不 完全 和 DOM 标 
准 一 致 的 地 方 ， 这 个 方法 却 返 回 为 true。 


错误 处 理 


无 尽 的 DOM 兼 容 性 问题 ， 如 果 总 是 使 用 对 象 检测 ， 就 会 带 来 无 尽 的 计 else 之 类 的 分 支 语 钉 ， 
而 且 检测 某 些 对 象 的 某 些 属性 时 还 会 引发 错误 (尤其 是 在 IE 下 ) ， 因 为 一 般 的 JavaScript 对 象 
都 可 以 转换 成 布尔 值 ， 但 浏览 器 内 置 的 一 些 方法 或 对 象 并 不 是 JavaScript 创 建 了 ， 它 们 不 一 定 
能 够 转换 成 布尔 值 ! 所 以 ， 使 用 错误 处 理 语句 不 但 避免 了 分 支 判 断 ， 而 且 可 以 很 优雅 的 处 理 


着 误 | 


try {} catch(e) {} finally {} 


function addFav(address,name) { try { 
window.sidebar .addPanel(name,address,"");//FF 方 法 
// 在 try 语 名 中， 如 果 脚 本 出 错 ， 会 自动 跳 转 到 catch 语 句 执 行 
} catch(e) {// 这 里 的 e 是 必须 的 ， 是 语法 的 一 部 分 ， 它 表示 一 个 错误 对 象 
window.external.addFavorite(address,name);//IE 
// 如 果 在 这 里 还 出 现 错误 ， 浏 览 器 就 会 将 这 个 错误 抛 出 


Error 对 象 


JavaScript 内 置 了 一 个 Error 构 造 函 数 ， 可 以 创建 一 个 错误 对 象 ， 并 可 以 使 用 throw 语 句 手动 抛 
出 错误 ! 
var err = new Error(); throw err; // 在 IE 中 ， 会 在 错误 窗口 中 显示 “未 指明 的 错误 ”， 而 FF 中 则 是 空 字符 串 
// 抛 出 错误 后 ， 脚 本 便 会 停止 往 下 执行 


var message = "我 抛 出 的 错误 1 ";// 错 误 描述 
err = new Error(message); throw err 


二 了 "| 


荐 误 对 象 的 属性 : message 属 性 保存 与 错误 对 象 相 关 的 描述 文字 ，number 对 象 保存 错误 代 
码 。 (错误 号 是 32 位 的 值 。 高 16 位 字 是 设备 代码 ， 而 低 字 是 实际 的 错误 代码 ， 不 过 错误 代 
码 对 我 们 来 说 是 没什么 意义 的 ) 
try { 
undefined();// 当 try 语 多 中 脚本 出 现 错误 时 ， 会 自动 抛 出 一 个 错误 对 象 
} catch(e) {//e 是 自动 创建 是 局 部 变量 ， 是 Error 的 实例 


alert(" 错 误 信息 是 : "+e .message+"\n"+" 错 误 代 码 是 : "+e.number); 
} finally { //finally 语 句 不 管 出 现 不 出 现 错误 ， 都 将 执行 ， 一 般 用 于 出 错时 释放 对 象 
} 


onerror 事 件 处 理 


DOM 还 有 个 onerror 事 件 处 理 ， 当 页 面 载 入 出 错 ， 图 象 载 入 出 错 及 页 面 脚 本 出 错时 会 执行 注册 
的 事件 处 理 函 数 ， 一 个 常用 的 方法 便 是 ， 在 事件 处 理 函 数 中 返回 true 可 以 阻止 浏览 器 出 现 错误 
提示 ! 


window.onerror = function () { 
alert(" 出 错时 你 会 看 到 我 的 1"); return true; 
}; 


另外 一 个 用 法 是 ， 可 以 监测 图 像 的 载 入 ， 如 果 图 像 载 入 出 错 ， 可 以 重新 载 入 图 像 (重新 设置 
src 属 性 ) ， 也 可 以 利用 这 个 方法 来 测试 一 下 图 像 是 否 存 在 (比如 检测 用 户 输入 的 远程 图 像 的 
URL 是 否 有 效 ) 


尽管 使 用 try {} catch(e) 人 } 语 句 ， 及 使 用 onerror 事 件 处 理 可 以 处 理 脚 本 运行 时 错误 ， 但 它们 
是 不 能 处 理 语 法 错误 的 ! 另外， 使 用 错误 处 理 语句 并 不 是 为 了 隐匿 错误 ， 而 只 是 为 了 不 干扰 
脚本 的 继续 执行 ! 


记录 错误 
处 理 了 这 么 多 错误 后 ， 记 录 错 误 这 样 的 事情 其 实 已 经 做 过 很 多 次 了 ， 主 要 有 下 面 几 种 方法 


。 使 用 alert 语 句 ， 好 处 是 可 以 让 脚本 暂停 运行 ， 坏 处 便 是 弹 窗 不 那么 好 控制 

。 使 用 document.write 方 法 ， 这 种 方法 自然 避免 了 弹 窗 没 法 关闭 的 情况 ， 但 不 好 控制 脚本 运 
行 ! 另 一 点 便 是 ， 使 用 document.write 会 清空 当前 页 面 ! 

。 与 document.write 方 法 类 似 的 是 使 用 一 个 自 建 的 控制 台 (比如 一 个 DIV) ， 然 后 将 错误 信 
息 一 条 一 条 的 添加 进去 ， 这 种 方法 肯定 比 document.write 好 多 了 ! 

e。 还 有 另 一 种 方法 便 是 使 用 浏览 器 内 置 的 控制 台 ， 如 在 JavaScript 里 面 可 以 调用 Java 控 制 台 
并 向 其 中 写 入 信息 (前 提 是 安装 了 JRE) 


java.lang.System.out.println(" 错 误 信 息 1! ");// 使 用 Java 控 制 台 
console.10og(" 错 误 信息 1! ");// 使 用 火狐 的 控制 台 
opera.postError(" 错 误 信息 1! ");// 使 用 0pera 的 控制 台 


使 用 库 提 高 开发 效率 


库 ， 就 是 一 些 可 以 方便 的 应 用 到 当前 的 开发 体系 中 的 代码 资源 ，JavaScript 库 又 被 称 之 为 
JavaScript 框 架 ， 它 是 由 一 些 类 和 普通 函数 构成 。 使 用 库 ， 可 以 使 开发 者 不 必 关 心 程序 的 实现 
细节 而 只 专心 于 业务 逻辑 。 有 很 多 流行 的 库 ， 它 们 大 都 能 够 跨 浏 览 器 工作 ， 并 且 采 用 了 面向 
对 象 的 良好 编码 方式 。 事实 上 ， 库 就 是 将 之 前 我 们 写 的 那些 可 以 跨 浏览 器 运行 的 函数 集中 到 
一 个 JS 文件 中 ， 以 便 能 在 所 有 页 面 都 能 够 重复 利用 这 些 代码 ! 当然 ， 它 们 不 是 简 简单 单 的 将 
函数 放 到 一 起 |! 下 面 是 一 些 流 行 的 库 及 其 优 缺点 : 


e Prototype 


不 要 把 它 和 JavaScript 里 面 的 prototype 相 混淆 ，Prototype 是 一 个 JS 框 架 (官方 称 之 为 框 
架 ) ， 可 以 说 是 最 早 也 是 最 出 名 的 JS 框架 了 。 它 提供 了 许多 JS 面向 对 象 的 扩展 及 DOM 
操作 API， 之 前 它 一 直 由 于 缺乏 API 文 档 而 备 受 诉 病 ， 但 现在 其 文档 已 很 充足 。 它 的 优点 
显 而 多 见 ， 它 只 提供 一 些 核心 的 ， 底 层 的 功能 ， 所 以 代码 精简 ， 体 积 较 小 ， 多 学 易 用 ， 
但 由 于 其 只 具有 底层 功能 ， 往 往 需 要 协同 其 它 Ul 库 来 运行 ! 目前 ， 基 于 Prototype 的 库 已 
经 有 很 多 ， 著 名 的 有 集成 Prototype 库 的 RoR Ajax 库 ， 以 及 为 Prototype 提 供 许多 视觉 特效 
的 Scriptaculous 库 。 


jQuery 


jQuery 是 一 款 同 Prototype 一 样 优秀 js 开发 库 ， 特 别 是 对 css 和 XPath 的 支持 ， 使 我 们 写 js 变 
得 更 加 方便 ! 如 果 你 不 是 个 js 高 手 又 想 写 出 优秀 的 js 效果 ，jQuery 可 以 帮 你 达到 目的 1 并 
且 简 洁 的 语法 和 高 效率 一 直 是 jQuery 追求 的 目标 。 (其 官网 标语 : jQuery 将 改变 您 书写 
JavaScript 的 方式 ! ) 。 连 YAHOO-UI| 都 重用 了 很 多 jQuery 的 函数 。 支 持 插件 是 jQuery 的 
另 一 大 优点 ， 可 以 无 即 的 扩展 其 功能 。 其 缺点 便 是 内 部 结构 复杂 ， 代 码 较 为 上 涩 ， 一 般 
的 新 手 根本 无 法 看 懂 其 源码 。 所 以 jQuery 适合 开发 而 不 适合 一 个 刚 开始 学 习 创建 JS 座 的 
新 手 研究 其 源码 。 


EXT-JS 


EXT-JS 前 身 是 YAHOO-UI，EXT-JS 是 具有 CS 风格 的 Web 用 户 界 面 组 件 能 实现 复杂 的 
Layout 布 局 ， 界 面 效 果 可 以 和 BackBase ( 另 一 JS 库 ) 媲美 ， 而 且 使 用 纯 javascript 代 码 开 
发 。 引 正 的 可 编辑 的 表格 Edit Grid， 支 持 XML 和 Json 数 据 类 型 ， 直 接 可 以 迁 入 grid。 许 多 
组 件 实现 了 对 数据 源 的 支持 ， 例 如 动态 的 布局 ， 可 编辑 的 表格 控件 ， 动 态 加 载 的 Tree 控 
件 、 动 态 拖 搜 效 果 等 等 。1.0 beta 版 开始 同 Jquery 合 作 ， 推 出 基于 jQuery 的 Ext 1.0， 提 供 
了 更 多 有 趣 的 功能 。 对 于 一 个 喜欢 JAVA 的 开发 者 来 说 ，EXT-JS 类 似 于 java 的 结构 ， 清 晰 
明了 ， 另 一 特点 其 可 以 实现 华丽 的 令 人 震撼 的 WEB 应 用 程序 。 当 然 ， 缺 点 也 很 严重 ， 由 
于 很 多 HTML 及 CSS 代 码 都 是 EXT-JS 自 己 创建 的 ， 所 以 其 界面 构造 十 分 复杂 ， 没 有 让 我 
们 自己 写 CSS 的 余地 。 


Dojo 


Dojo 是 目前 最 为 强大 的 工业 级 JS 框 架 。 它 在 自己 的 Wiki 上 给 自己 下 了 一 个 定义 ，dojo 是 

一 个 用 JavaScript 编 写 的 开源 的 DHTML 工 具 箱 。dojo 很 想 做 一 个 “大 一 统 "的 工具 箱 ， 不 

仅仅 是 浏览 器 层面 的 ， 野 心 还 是 很 大 的 。Dojo 包 括 ajax, browser, event, widget 等 跨 浏览 
器 API， 包 括 了 JS 本 身 的 语言 扩展 ， 以 及 各 个 方面 的 工具 类 库 ， 和 比较 完善 的 UI 组 件 库 ， 
也 被 广泛 应 用 在 很 多 项 目 中 ， 他 的 U 组 件 的 特点 是 通过 给 html 标 签 增 加 tag 的 方式 进行 扩 
展 ， 而 不 是 通过 写 JS 来 生成 ，dojo 的 API 模 念 Java 类 库 的 组 织 方式 。 用 dojo 写 Web OS 

可 谓 非常 方便 。dojo 现 在 已 经 4.0 了 ，dojo 强 大 的 地 方 在 于 界面 和 特效 的 封装 ， 可 以 让 开 
发 者 快速 构建 一 些 兼容 标准 的 界面 。 Dojo 几 乎 集 了 成 了 上 面 的 JS 库 的 优点 ， 其 功能 非 同 
一 般 的 强大 ， 已 得 到 了 IBM 和 SUN 的 支持 ， 但 是 自然 的 ， 其 体积 也 十 分 大 ， 总 共有 200 多 
KB ， 另 外 ， 其 语法 也 不 如 jQuery 灵活 ， 对 JavaScript 语 言 的 增强 也 不 如 Prototype。 


e。 Scriptaculous 


Scriptaculous 是 基于 prototype.js 框 架 的 JS 效果 。 包 含 了 6 个 js 文件 ， 不 同 的 文件 对 应 不 同 
的 js 效果 ， 所 以 说 ， 如 果 底 层 用 prototype 的 话 ， 做 js 效果 用 Scriptaculous 那 是 再 合适 不 过 
的 了 。 优 点 便 是 基于 Prototype， 可 以 说 是 Prototype 的 插件 ， 不 同 的 效果 用 不 同 的 JS 文件 
分 开 存 放 ， 当 然 ， 依 赖 于 Prototype 也 是 其 缺点 。 


e moo.fx 


moo.fx 是 一 个 超级 轻 量 级 的 javascript 特 效 库 (3k) ,能 够 与 prototype.js 框 架 一 起 使 用 。 它 
非常 快 、 易 于 使 用 、 跨 浏览 器 、 符 合 标准 ， 提 供 控 制 和 修改 任何 HTML 元 素 的 CSS 属 性 ， 
包括 颜色 。 它 内 置 检 查 器 能 够 防止 用 户 通过 多 次 或 疯狂 点 击 来 破坏 效果 。moo.fx 整 体 采 
用 模块 化 设计 ， 所 以 可 以 在 它 的 基础 上 开发 你 需要 的 任何 特效 。 轻 量 是 其 最 大 的 优点 ， 

当然 其 缺点 便 是 轻 量 级 的 ， 但 是 轻 量 级 的 JS 库 能 有 如 此 强大 已 经 很 不 错 了 。 


命名 空间 


在 创建 库 之 前 ， 第 一 个 要 考虑 的 问题 便 是 如 何 防止 变量 重 名 的 问题 ! 解决 方案 便 是 使 用 命名 
空间 ! 命名 空间 是 JAVA 等 语言 中 的 一 个 概念 ，JavaScript 并 不 支持 命名 空间 ， 但 由 于 
JavaScript 的 灵活 性 ， 我 们 可 以 使 用 对 象 来 模 似 命名 空间 ! 


var NameSpace={}; 
NameSpace.fn1 =function () {}; 
NameSpace.fn2 =function () {€}; 


现在 ，fn1 与 fn2 两 个 函数 就 同属 于 NameSpace 命 名 空间 中 了 ， 它 们 不 会 也 全 局 中 的 fn1 或 fn2 
冲突 ， 当 然 ， 在 使 用 的 时 候 必 需 加 上 NameSpace 前 级 。 这 样 使 用 命名 空间 并 不 是 最 简单 的 ， 
为 我 们 不 得 不 在 任何 地 方 调用 这 些 函 数 的 时 候 都 加 上 NameSpace 前 级 。 下 面 是 使 用 
JavaScript 闭 包 来 解决 的 方案 : 


Var NameSpace={}; 
(function () { function fn1() { 
} function fn2() { 
fn1i();// 在 这 里 调用 fn1 不 需要 加 NameSpace 前 级 


NameSpace .fn1=fn1;// 将 其 添加 为 全 局 变量 NameSpace 的 属性 ， 以 便 能 在 函数 外 访问 
NameSpace .fn2=fn2; 
})(); 


javascript 快 速 入 门 22--Ajax 简 介 


Ajax 十 什么 ? 


首先 ,Ajax 是 什么 ?一 个 很 酷 的 新 兴 词 汇 ! 仅 仅 是 茶 种 早 就 有 了 的 技术 的 一 种 新 说 法 而 已 ! Ajax 是 
指 一 种 创建 交互 式 网 页 应 用 的 网 页 开发 技术 。 要 谈 到 网 页 应 用 程序 , 则 必须 从 WEB 的 历史 来 讲 : 


1. 开 始 的 Internet, 仅 仅 是 科学 家 们 用 来 交换 研究 论文 ,及 一 些 大 学 在 上 面 发 布 一 些 课程 信息 的 工 
具 , 那 个 时 候 网 页 与 一 幅 户 外 广告 没 多 大 区 别 (相反 户外 广告 才能 起 来 广告 的 作用 ). 那 个 时 候 ,只 

有 少 部 分 的 公司 具有 公司 网 站 ,而 它们 的 公司 网 站 仅仅 是 在 首页 上 放置 一 些 联 系 信息 或 一 些 静 

态 的 文档 ! 


2. 当 Windows 出 现 后 (尽管 Windows 仅 仅 是 给 早 就 有 了 的 操作 系统 加 个 外 套 而 已 ,但 这 确实 上 一 
大 进步 ), 及 个 人 电脑 的 流行 ,WEB 也 开始 从 学 院 走向 群众 ,人 们 无 法 再 忍受 静态 网 页 的 一 成 不 变 ， 
于 是 CGI(Common Gateway Interface) 诞 生 了 ! CGI 其 实 是 用 C 或 Perl 编 写 的 程序 , 当 用 户 请 求 

某 个 页 面 时 ,CGI 程序 会 自动 执行 ,CGI 程序 可 以 访问 数据 库 , 返 回 HTML 页 面 .那个 时 候 就 可 以 通 


过 CGI 来 创建 一 个 在 线 商城 了 .然而 CGI 有 很 多 缺点 :首先 是 其 编写 很 复杂 ,往往 编写 CGI 的 是 一 
些 专业 的 程序 员 , 他 们 只 会 关心 一 些 算 法 问题 ,而 不 会 理 HTML 页 面 是 否 漂亮 ! 另 一 点 ,由 于 CGI 是 


过 编译 后 的 程序 ,虽然 作为 独立 程序 运行 时 效率 会 很 高 ,但 也 很 危险 ,因为 CGI 程序 可 以 访问 服 
器 的 系统 里 的 其 它 与 WEB 无 关 的 程序 及 创建 文件 ,虽然 一 般 情 况 下 CGI 程序 不 会 这 样 做 ,但 如 
果 恶 意 用 户 将 CGI 程序 放 到 服务 器 ,那么 它 就 可 以 为 所 和 谷 为 了 ! 尽 管 存在 这 些 缺 陷 ， 到 如 今 CGI 
仍 在 使 用 。 


六 深 ) 


3. 很 多 人 都 知道 Sun, 知 道 因特网 流行 的 编程 语言 JAVA. 如 上 所 说 CGI 具有 许多 缺点 ,JAVA 便 是 来 
弥补 这 些 缺 点 的 .由 于 Netscape 的 Navigator 支 持 Java， 动 态 Web 页 面 掀 开 了 新 的 一 页 : applet 
时 代 到 来 了 。Applet 与 CGI 不 同 , 它 是 运行 在 客户 端的 ,Applet 就 是 能 入 在 Web 页 面 上 的 小 应 用 
程序 . 只 要 用 户 使 用 支持 Java 的 浏览 器 ， 就 可 以 在 浏览 器 的 Java 上 庶 拟 机 (Java Virtual 
Machine，JVM) 中 运行 applet。 尽 管 applet 可 以 做 很 多 事情 ， 但 它 也 存在 一 些 限制 : 通常 不 
允许 它 读 写 文件 系统 ， 它 也 不 能 加 载 本 地 库 ， 而 且 可 能 无 法 启动 客户 端 上 的 程序 。 除 了 这 些 
限制 外 ，applet 是 在 一 个 沙 箱 安 全 模型 中 运行 的 ， 这 是 为 了 有 助 于 防止 用 户 运 行 恶 意 代码 。 
JAVA 最 先 就 是 因为 Applet 出 名 的 ,而 很 多 人 学 JAVA 也 是 从 Applet 开 始 的 .然而 ,Applet 好 景 不 长 ， 
一 是 由 于 一 个 Applet 本 身 加 载 要 很 长 时 间 , 另 一 方面 ,由 于 更 流行 的 MS 的 IE 开始 不 支持 Applet， 


它 就 只 好 没落 了 . 


4. 与 此 同时 ，Netscape 创 建 了 一 种 脚本 语言 ， 并 最 终 命 名 为 JavaScript (建立 原型 时 叫做 
Mocha， 正 式 发 布 之 前 曾经 改名 为 LiveWire 和 LiveScript， 不 过 最 后 终于 确定 为 

JavaScript) 。 设 计 JavaScript 是 为 了 让 不 大 熟悉 Java 的 Web 设 计 人 员 和 程序 员 能 够 更 轻松 地 
开发 applet (当然 ，Microsoft 也 推出 了 与 JavaScript 相 对 应 的 脚本 语言 ， 称 为 VBScript) 。 当 


然 ,最 初 JavaScript 是 很 失败 的 ,由 于 各 个 浏览 器 相互 不 兼容 (然而 它们 都 提供 了 弹 窗 ,那些 烦人 的 
alert), 又 因为 缺乏 开发 工具 ,JavaScript 很 受 非议 .但 尽管 如 此 ，JavaScript 仍 然 是 一 种 创建 动态 
Web 应 用 的 强大 方法 。 


5. 在 Java 问 世 一 年 左右 ，Sun 引 入 了 servlet。 现 在 Java 代 码 不 用 本 从 apPIeC 入 生生 人 端 浏览 
| 的 一 个 应 用 服务 器 上 运行 。 这 样 ， 开 发 人 员 就 能 充分 利用 现 有 
oo tn eo do pe a 
棠 “一 次 编写 ， 到 处 运行 "， 这 一 点 使 得 开发 人 员 可 以 选择 最 先进 的 应 用 服务 器 和 服务 器 环境 ， 
se 另 一 个 优点 。Sservlet 还 可 以 取代 CGI 脚本 。 当然 ,这 个 时 候 的 servlet 仍然 
比 CGI 简 单 不 了 多 少 .MS 吸 取 了 Sun 的 教训 ,推出 了 ASPSun 也 很 快 作出 了 回应 ,推出 了 JSPJSP 
和 ASP 的 设计 目的 都 是 为 了 将 业务 处 理 与 页 面 外 观 相 分 离 ， 从 这 个 意义 上 讲 ， 二 者 是 相似 
的 。 虽 然 存 在 一 些 技术 上 的 差别 (Sun 也 从 Microsoft 那 里 学 到 了 教训 ) ， 但 它们 有 一 个 最 大 的 
共同 点 ， 即 Web 设 计 人 员 能 够 专心 设计 页 面 外 观 ， 而 软件 开发 人 员 可 以 专心 开发 业务 逻辑 。 
ASP 与 JSP 都 没有 至 断 服务 器 脚本 市 场 ,因为 还 有 其 它 优 秀 的 服务 器 脚本 ,如 PHP,ColdFusion 及 
Ruby! 


6. 当 WEB 进 化 到 这 里 的 时 候 ,动态 的 网 站 了 .但 人 们 对 动态 的 定义 一 直 很 模糊 ,比如 说 
很 多 人 以 为 动态 是 指 动画 ! 其 实 这 也 没什么 可 笑 的 , 正 是 这 一 理念 ,将 动态 WEB 从 服务 器 端 动态 
生成 HTML 进 化 为 富 客户 端 应 0 富 客户 端 应 用 程序 (Rich Internet 
Applications, 富 因特网 应 用 程序 ,RIA) 的 提出 解决 了 长 久 以 来 的 "客户 体验 "问题 ,用 户 在 使 用 
Windows 时 已 经 习惯 于 那些 各 色 各 样 的 桌面 应 用 程序 ,而 死板 的 HTML 页 面 往 往 只 能 提供 一 些 
文档 . RIA 的 出 现 , 目 标 就 是 能 使 WEB 页 面 能 像 桌面 应 用 程序 一 样 具 有 很 高 的 交互 性 及 响应 率 ， 
其 实 Sun 推 出 的 Applet 就 是 一 个 RIA, 当 然 MS 也 有 其 产品 ,最 近 推 出 的 SilverLight. 并 不 只 有 这 两 
家 ,还 有 Adobe Flash( 它 不 是 做 动画 的 吗 ? 对 的 ,但 其 不 但 可 以 用 来 做 动画 ,还 可 以 创建 一 些 其 它 
的 RIA), 利 用 Flash， 设 计 人 员 可 以 创 ee 叹 的 动态 应 用 。 公 司 可 以 在 Web 上 发 布 高 度 交 互 
性 的 应 用 ， 几 乎 与 胖 客 户 应 用 相差 无 几 。 不 同 于 applet、servlet 和 CGI 脚本 ，Flash 不 需要 编程 
技巧 ， 很 容易 上 手 。 像 许多 ， Flash 需 要 客户 端 软件 ,由 于 此 限制 ,很 多 网 站 上 就 
多 出 了 " 跳 过 此 页 "的 链接 . 


7. 主 角 出 场 了 (其 实 已 经 低调 出 场 过 一 次 了 ), 曾 经 的 JavaScript, 以 及 其 带 来 的 DHTML, 开 始 了 新 
的 历程 . 当 Microsoft 和 Netscape 发 布 其 各 自 浏览 器 的 第 4 版 时 ，Web 开 发 人 员 有 了 一 个 新 的 选 
择 : 动态 HTML (Dynamic HTML，DHTML) 。 与 有 些 人 想像 的 不 同 DHTML 不 是 一 个 W3C 标 
准 ， 它 更 像 是 一 种 营销 手段 。 实 际 上 ，DHTML 结 合 了 HTML、 层 受 样 式 表 (Cascading Style 
Sheets ， CSS) 、JavaScript 和 DOM。 这 些 技术 的 结合 使 得 开发 人 员 可 以 动态 地 修改 Web 页 
面 的 内 容 和 结构 。 最 初 DHTML 的 反响 很 好 。 不 过 ， 它 需要 的 浏览 器 版 本 还 没有 得 到 广泛 采 
用 。 尽 管 IE 和 Netscape 都 支持 DHTML， 但 是 它们 的 实现 大 相 径 庭 ， 这 要 求 开 发 人 员 必 须知 道 
他 们 的 客户 使 用 什么 浏览 器 。 而 这 通常 意味 着 需要 大 量 代码 来 检查 浏览 器 的 类 型 和 版 本 ， 这 
就 进一步 少 如 于 并 妥 的 开 录 4 有 些 人 对 于 尝试 这 种 方法 很 是 迟疑 ， 六 DINE 设法 :让 
方 的 标准 。 当 DHTML 渐 渐 退 出 视野 之 后 ,我 们 的 JavaScript 并 没有 没落 ,由 于 W3C 标 准 的 不 断 
推进 ,给 JS 带 来 了 福音 ,现在 编写 跨 浏 览 器 的 代码 并 不 像 当初 那样 困难 了 (尽管 也 存在 一 些 问题 )， 
另外 ,XML 与 异步 通 A dee A 的 流行 ,浏览 器 对 支持 也 越 来 越 好 ,也 使 得 


JS 可 以 大 展 其 身手 . 当 你 使 用 JS 操纵 DOM 的 时 候 ,就 发 现实 现 动态 WEB 应 用 程序 已 经 不 再 有 多 
听 远 , 现在 又 有 了 XML( 数 据 库 ) 与 异步 通信 的 支持 ,可 以 使 得 应 用 程序 在 加 载 完成 后 ,无 需 跳 转 ， 
就 可 以 返回 给 用 户 所 有 的 内 容 了 ! 


Ajax 是 多 种 技术 的 并 称 


Ajax 是 Asynchronous JavaScript and XML (异步 JavaScript 和 XML) ， 它 其 实 包含 了 很 多 技 
术 , 主 要 是 下 面 所 列 的 : 


e。 ECMAScript ,为 什么 不 是 JavaScript? 因 为 JavaScript 本 身 与 Ajax 一 样 ,包含 的 也 太 多 了 ! 

e。 DOM 及 相关 内 容 :CSS,XHTML.... 

。 XML, 及 XML 的 一 些 扩 展 语言 :XSL,SVG,XUL,XAML.....XML 的 扩展 太 多 了 

。 XMLHttpRequest 对 象 ,浏览 器 提供 的 一 个 可 以 用 于 异步 通信 的 JavaScrip 对 象 

e 服务 器 脚本 的 支持 ,没有 服务 器 脚本 在 后 台 工 作 ,也 是 没有 办 法 实现 "动态 "的 ,之 后 就 知道 
本 


关于 XMLHttpRequest 对 象 


XMLHttpRequest 对 象 其 实 最 早 是 由 MS 提 出 来 的 ,并 在 IE5 中 就 提供 了 支持 ,当时 ,在 IE5 里 它 是 
一 个 ActiveXObject. 原先 ，XHR 对 象 只 在 IE 中 得 到 支持 《因此 限制 了 它 的 使 用 ) ， 但 是 从 
Mozilla 1.0 和 Safari 1.2 开 始 ， 对 XHR 对 象 的 支持 开始 普及 。 这 个 很 少 使 用 的 对 象 和 相关 的 基 
本 概念 其 至 已 经 出 现在 W3C 标 准 中 : DOM Level 3 加 载 和 保存 规约 (DOM Level 3 Load and 
Save Specification ) 。 现 在 ， 特 别 是 随 着 Google Maps、Google Suggest、Gmail、Flickr、 
Netflix 和 A9 等 应 用 变 得 越 来 越 炙 手 可 热 ，XHR 也 已 经 成 为 事实 上 的 标准 。 与 前 面 提 到 的 方法 
不 同 ，Ajax 在 大 多 数 现代 浏览 器 中 都 能 使 用 ， 而 且 不 需要 任何 专门 的 软件 或 硬件 。 实 际 上 ， 
这 种 方法 的 一 大 优势 就 是 开发 人 员 不 需要 学 习 一 种 新 的 语言 ， 也 不 必 完 全 丢掉 他 们 原先 掌握 
的 服务 器 端 技术 。Ajax 是 一 种 客户 端 方法 ， 可 以 与 J2EE、.NET、PHP、Ruby 和 CGI 脚 本 交 
互 ， 它 并 不 关心 服务 器 是 什么 。 尽 管 存在 一 些 很 小 的 安全 限制 ， 你 还 是 可 以 现在 就 开始 使 用 
Ajax， 而 且 能 充分 利用 你 原 有 的 知识 。 


早期 的 异步 通信 实现 


虽然 可 以 使 用 XHR 对 象 来 实现 异步 通信 ,但 其 实 早 期 的 开发 人 员 曾 经 也 尝试 过 使 用 隐藏 帧 等 方 
法 来 实现 异步 通信 ! 


// 主 页 面 中 的 JS 代码 


function getPages(url) { var iframe =document.getElementById("hideIframe");// 一 个 隐藏 了 
iframe.src = url;// 将 帧 的 src 设 置 为 传 入 的 url, 就 可 以 将 那个 页 面 在 后 人 台 载 入 


window.container = document. Solin a aie // 加 载 内 容 的 窗口 

getPages("test ， Be Value");// 可 以 通过 QS 传递 参数 

// 在 隐藏 帧 中 加 载 的 页 面 中 JS 代码 

window.onload = function () {// 当 帧 加 载 完 毕 后 修改 父 窗口 中 的 内 容 
parent.container.innerHTML = document.body.innerHTML; 

} 


<| 








另外 还 有 一 种 就 是 使 用 Script 标签 


//HTML 


<script type="text/javascript" id="voidScript" src="void(0)"> </script> 
//JS 


function getscript (url) { var script = document.getElementById("voidscript"); 
script.src =url;// 这 种 方法 必须 加 载 ]S 脚 本 , 并 且 脚 本 加 载 后 就 会 执行 


getscript("test.php?userName=abc"); 


Ajax 的 问题 


eee na 尽管 它 有 诸多 优点 :如 可 与 XHTML 无 颖 集成, 轻 量 ,无 需 插 件 .. 但 
点 也 有 不 少 :依赖 JavaScript, 影 响 浏览 器 默认 行为 如 后 退 按 钮 及 收藏 夹 等 .另外 , 它 最 大 的 优 
ee 它 最 大 的 缺点 : 我 们 以 前 总 是 告诉 用 户 ，Web 应 用 是 以 一 种 请 求 /响应 模式 完成 操作 的 ， 
六 这 种 思想 。 但 是 用 了 Ajax， 就 不 再 有 这 个 限制 。 我 们 可 以 只 修改 页 面 的 一 
分 ， 如 果 用 户 没 想到 这 一 点 ， 他 们 会 党 试 狂 点 某 按钮 ,或 刷新 页 面 ,所 以 要 通过 一 些 方法 来 让 
户 知道 页 面 正 在 "异步 "与 服务 器 交互 ! 
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对 月 


创建 XMLHttpRequest 对 象 


与 之 前 众多 DOM 操 作 一 样 ,创建 XHR 对 象 也 具有 兼容 性 问题 :IE6 及 之 前 的 版 本 使 用 
ActiveXObject,IE7 之 后 及 其 它 浏览 器 使 用 XMLHttpRequest 


不 但 IE6 及 其 之 前 的 版 本 将 XHR 作 为 一 个 ActiveXObject 运 行 ,而 且 还 存在 众多 版 本 :一 开始 是 
Microsoft.XMLHTTP 之 后 变 成 Msxml2.XMLHTTP 有 及 更 新 版 的 Msxml3.XMLHTTP 


function XHR() { var xhr; try {xhr = new XMLHttpRequest();} catch(e) { var IEXHRVers =[" 


} return xhr; 





使 用 XHR 


var xhr = XHR(); //open 方 法 创建 一 个 新 的 http 请 求 ， 并 指定 此 请 求 的 方法 、URL 以 及 验证 信息 (用 户 名 /密码 ) 
xhr.open("get", "test.,txt",true); /* 第 一 个 参数 是 请 求 方 式 , 一 般 用 get 与 post 方 法 ,与 form 标 签 的 mett 
第 二 个 参数 是 请 求 的 URL 
第 三 个 参数 是 请 求 是 同步 进行 还 是 异步 进行 ,true 表示 异步 
调用 了 open 方 法 仅仅 是 传递 了 参数 而 已 */ xhr.send(null);// 调 用 了 send 方 法 后 才 会 发 出 请 求 
// 并 且 get 方 式 发 送 请 求 时 send 参 数 是 null 


二 必 


在 服务 器 环境 中 执行 上 面 的 脚本 ,并 且 给 一 个 php 或 asp 脚 本 发 送 请 求 ,会 发 现 服务 器 端 脚本 其 实 
会 被 执行 





//PHP 脚 本 
$fp =fopen("a.txt", "wb"); fwrite($fp, "PHP 文 件 在 后 人 台 执 行 了 3"); fclose($fp); echo "返回 内 容 ! 





上 面 PHP 脚 本 的 返回 内 容 不 会 直接 在 页 面 上 显示 出 来 ,必需 要 用 JS 通过 XHR 对 象 接收 


Var xhr = XHR() 

xhr.open("get","test.php",true); 

xhr.onreadystatechange = callback;// 在 readystatechange 事 件 上 绑 定 一 个 函数 

// 当 接收 到 数据 时 ,会 调用 readystatechange 事 件 上 的 事件 处 理 函 数 

xhr.send(null); 

functon callback() { // 在 这 里 面 没 有 使 用 this.readyState 这 是 因为 TE 下 面 ActiveX0bject 的 特殊 性 
if (xhr.readystate == 4) {//readyState 表 示 文 档 加 载 进度 , 4 表示 完毕 

alert(xhr.reponseText);//responseText 属 性 用 来 取得 返回 的 文本 


1 = 





XHR 对 象 参考 


readyState 属 性 返回 当前 请 求 的 状态 


0 (未 初始 化 ) 对 象 已 建立 ， 但 是 尚未 初始 化 (尚未 调用 open 方 法 ) 
e。 1 (初始 化 ) 对 象 已 建立 ， 尚 未 调用 send 方 法 

2 (发 送 数据 ) send 方 法 已 调用 ， 但 是 当前 的 状态 及 http 头 未 知 

3 (数据 传送 中 ) 已 接收 部 分 数据 ， 因 为 响应 及 http 头 不 全 ， 这 时 通过 responseBody 和 
responseText 获 取 部 分 数据 会 出 误 

4 (完成 ) 数据 接收 完毕 ,此 时 可 以 通过 通过 responseBody 和 responseText 获 取 完 整 的 回应 
数据 


Var xhr =XHR() 

alert(xhr.readystate);//0 

xhr.open("get","test.htm",true); 

alert(xhr.readyState);//1 

xhr.send(null); 

alert(xhr.readyState);//IE 下 会 是 4, 而 FF 下 会 是 2 

// 可 以 通过 readystatechange 事 件 监听 

xhr = XHR(); 

xhr.onreadystatechange = function () { 
alert(xhr.readyState);//FF 下 会 依次 是 1, 2, 3, 4 但 最 后 还 会 再 来 个 1 
X71IE 下 则 是 1 ,13,4 


xhr.open("get","test,.txt",true); 
xhr.send(null); 


从 上 面 可 以 看 到 ,对 于 readyState 这 个 属性 ,各 个 浏览 器 看 法 也 不 一 样 ,但 其 实 我 们 只 需要 知道 
状态 为 4 的 时 候 可 以 获取 response 就 行 了 ! 


status 返回 当前 请 求 的 http 状 态 码 


status 属 性 返回 当前 请 求 的 http 状 态 码 ,此 属性 仅 当 数据 发 送 并 接收 完毕 后 才 可 获取 。 完 整 的 
HTTP 状 态 码 如 下 : 


e。 100 Continue 初始 的 请 求 已 经 接受 ， 客 户 应 当 继 续 发 送 请 求 的 其 

。 101 Switching Protocols 服务 器 将 遵从 客户 的 请 求 转换 到 另 en 
。 200 OK 一 切 正 常 ， 对 GET 和 POST 请 求 的 应 答 ee 。 

e。 201 Created 服务 器 已 经 创建 了 文档 ，Location 头 给 出 了 它 的 URL。 


202 Accepted 已 经 接受 请 求 ， 但 处 理 尚 未 完成 。 

203 Non-Authoritative Information 文档 已 经 正常 地 返回 ， 但 一 些 应 答 头 可 能 不 正确 ， 
为 使 用 的 是 文档 的 拷贝 

204 No Content 没有 新 文档 ， 浏 览 器 应 该 继续 显示 原来 的 文档 。 如 果 用 户 定期 地 刷新 页 
面 ， 而 Servlet 可 以 确定 用 户 文档 足够 新 ， 这 个 状态 代码 是 很 有 用 的 

205 Reset Content 没有 新 的 内 容 ， 但 浏览 器 应 该 重 置 它 所 显示 的 内 容 。 用 来 强制 浏览 器 
清除 表单 输入 内 容 

206 Partial Content 客户 发 送 了 一 个 带 有 Range 头 的 GET 请 求 ， 服 务 器 完成 了 它 

300 Multiple Choices 客户 请 求 的 文档 可 以 在 多 个 位 置 找到 ， 这 些 位 置 已 经 在 返回 的 文档 
内 列 出 。 如 果 服 务 器 要 提出 优先 选择 ， 则 应 该 在 Location 应 答 头 指明 。 

301 Moved Permanently 客户 请 求 的 文档 在 其 他 地 方 ， 新 的 URL 在 Location 头 中 给 出 ， 浏 
览 器 应 该 自动 地 访问 新 的 URL 。 

302 Found 类 似 于 301， 但 新 的 URL 应 该 被 视 为 临时 性 的 替代 ， 而 不 是 永久 性 的 。 

303 See Other 类 似 于 301/302， 不 同 之 处 在 于 ， 如 果 原 来 的 请 求 是 POST，Location 头 指 
定 的 重 定向 目标 文档 应 该 通过 GET 提 取 

304 Not Modified 客户 端 有 绥 冲 的 文档 并 发 出 了 一 个 条 件 性 的 请 求 (一 般 是 提供 If 
Modified-Since 头 表示 客户 只 想 比 指定 日 期 更 新 的 文档 ) 。 服 务 器 告诉 客户 ， 原 来 缓冲 的 
文档 还 可 以 继续 使 用 。 

305 Use Proxy 客户 请 求 的 文档 应 该 通过 Location 头 所 指明 的 代理 服务 器 提取 

307 Temporary Redirect 和 302 (Found) 相同 。 许 多 浏览 器 会 错误 地 响应 302 应 答 进 行 
重 定向 ， 即 使 原来 的 请 求 是 POST， 即 使 它 实际 上 只 能 在 POST 请 求 的 应 答 是 303 时 才 外 
重 定向 。 由 于 这 个 原因 ，HTTP 1.1 新 增 了 307， 以 便 更 加 清除 地 区 分 几 个 状态 代码 : 当 出 
现 303 应 答 时 ， 浏 览 器 可 以 跟随 重 定向 的 GET 和 POST 请 求 ; 如 果 是 307 应 答 ， 则 浏览 器 
只 能 跟随 对 GET 请 求 的 重 定向 。 

400 Bad Request 请 求 出 现 语法 错误 。 

401 Unauthorized 客户 试图 未 经 授权 访问 受 密码 保护 的 页 面 。 应 ve 含 一 个 WWW- 
Authenticate 头 ， 浏 览 器 据 此 显示 用 户 名 字 / 蜜 码 对 话 框 ， 然 后 在 填写 合适 的 Authorization 
头 后 再 次 发 出 请 求 。 

403 Forbidden 资源 不 可 用 。 

404 Not Found 无 法 找到 指定 位 置 的 资源 

405 Method Not Allowed 请 求 方法 (GET、POST 、HEAD、Delete、PUT、TRACE 

等 ) 对 指定 的 资源 不 适用 。 

406 Not Acceptable 指定 的 资源 已 经 找到 ， 但 它 的 MIME 类 型 和 客户 在 Accpet 头 中 所 指定 
的 不 兼容 

407 Proxy Authentication Required 类 似 于 401， 表 示 客 户 必 须 先 经 过 代理 服务 器 的 授 

权 。 

408 Request Timeout 在 服务 器 许可 的 等 待 时 间 内 ， 客 户 一 直 没 有 发 出 任何 请 求 。 客 户 可 
以 在 以 后 重复 同一 请 求 。 

409 Conflict 通常 和 PUT 请 求 有 关 。 由 于 请 求 和 资源 的 当前 状态 相 冲 突 ， 因 此 请 求 不 能 

功 。 


bl 
已 


。 410 Gone 所 请 求 的 文档 已 经 不 再 可 用 ， 而 且 服务 器 不 知道 应 该 重 定 向 到 哪 一 个 地 址 。 它 
和 404 的 不 同 在 于 ， 返 回 407 表 示 文档 永久 地 离开 了 指定 的 位 置 ， 而 404 表 示 由 于 未 知 的 
原因 文档 不 可 用 。 

。 411 Length Required 服务 器 不 能 处 理 请 求 ， 除 非 客 户 发 送 一 个 Content-Length 头 

。 412 Precondition Failed 请 求 头 中 指定 的 一 些 前 提 条 件 失 败 

。 413 Request Entity Too Large 目标 文档 的 大 小 超过 服务 器 当前 愿意 处 理 的 大 小 。 如 果 服 
务 器 认为 自己 能 够 稍 后 再 处 理 该 请 求 ， 则 应 该 提供 一 个 Retry-After 头 

。 414 Request URI Too Long URI 太 长 

。 416 Requested Range Not Satisfiable 服务 器 不 能 满足 客户 在 请 求 中 指定 的 Range 头 

。 500 Internal Server Error 服务 器 遇 到 了 意料 不 到 的 情况 ， 不 能 完成 客户 的 请 求 

。 501 Not Implemented 服务 器 不 支持 实现 请 求 所 需要 的 功能 。 例 如 ， 客 户 发 出 了 一 个 服务 
器 不 支持 的 PUT 请 求 

。 502 Bad Gateway 服务 器 作为 网 关 或 者 代理 时 ， 为 了 完成 请 求 访问 下 一 个 服务 器 ， 但 该 
服务 器 返回 了 非法 的 应 答 

。 503 Service Unavailable 服务 器 由 于 维护 或 者 负载 过 重 未 能 应 答 。 例 如 ，Servlet 可 能 在 
数据 库 连 接 池 已 满 的 情况 下 返回 503。 服 务 器 返回 503 时 可 以 提供 一 个 Retry-After 头 

。 504 Gateway Timeout 由 作为 代理 或 网 关 的 服务 器 使 用 ， 表 示 不 能 及 时 地 从 远程 服务 器 
获得 应 答 

。 505 HTTP Version Not Supported 服务 器 不 支持 请 求 中 所 指明 的 HTTP 版 本 


事实 上 ,我 们 只 需要 知道 状态 为 200 的 时 候 (OK) 才 读 取 response 就 行 了 ! 


responseText 与 responseXML 


responseText 将 响应 信息 作为 字符 串 返回 .XMLHTTP 尝 试 将 响应 信息 解码 为 Unicode 字 符 

囊 ，XMLHTTP 上 默认 将 响应 数据 的 编码 定 为 UTF-8， 如 果 服 务 器 返回 的 数据 带 BOM(byte-order 
mark)，XMLHTTP 可 以 解码 任何 UCS-2 (big or little endian) 或 者 UCS-4 数据 。 注 意 ， 如 果 服 
务 器 返回 的 是 xml 文 档 ， 此 属性 并 不 处 理 xm| 文 档 中 的 编码 声明 。 你 需要 使 用 responseXML 来 
处 理 。 


responseXML 将 响应 信息 格式 化 为 Xml Document 对 象 并 返回 . 如 果 响 应 数据 不 是 有 效 的 XML 
文档 ， 此 属性 本 身 不 返回 XMLDOMParseError， 可 以 通过 处 理 过 的 DOMDocument 对 象 获取 
苦 误 信息 。 

其 它 一 些 XHR 对 象 的 方法 

abort 取消 当前 请 求 


getAlIResponseHeaders 获取 响应 的 所 有 http 头 每 个 http 头 名 称 和 值 用 冒号 分 割 ， 并 以 \rn 结 
束 。 当 send 方 法 完成 后 才 可 调用 该 方法 。 


getResponseHeader 从 响应 信息 中 获取 指定 的 http 头 当 send 方 法 成 功 后 才 可 调用 该 方法 。 如 
果 服 务 器 返回 的 文档 类 型 为 "text/xml", 则 这 句 话 xmlhttp.getResponseHeader("Content- 
Type); 将 返回 字符 串 "text/xml"。 可 以 使 用 getAlIResponseHeaders 方 法 获取 完整 的 http 头 信 
息 9 

setRequestHeader 单独 指定 请 求 的 某 个 http 头 如 果 已 经 存在 已 此 名 称 命名 的 http 头 ， 则 堆 盖 
之 。 此 方法 必须 在 open 方 法 后 调用 。 


请 求 方式 
GET 请 求 


A/YS 
Var xhr = XHR(); 
xhr.open("get", "test.php?qs=true&userName=abc&pwd=123456", true); 
xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status ==200) { 
alert(xhr.responseText); 
} 
}; 


xhr.send(null); //PHP 
print_r($ GET); 


二 | 
POST 请 求 


//JS 
Var xhr = XHR(); 
xhr.open("post","test.php",true); 
xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status ==200) { 
alert(xhr.responseText); 


} 
}; // 比 GET 请 求 多 了 一 步 
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 另 外 ,数据 
xhr.send("qs=true&userName=abc&pwd=123456"); //PHP 
header("Cache-Control: no-cache，must-revalidate" );// 可 以 让 浏览 器 不 缓存 结果 
print_r($ POST); 


表 袜 了 <i 





javascript 快 速 入 门 24--XML 基 础 


XML 简介 


XML 代表 Extensible Markup Language (eXtensible Markup Language 的 缩写 ， 意 为 可 扩展 
的 标记 语言 ) 。XML 被 设计 用 来 传输 和 存储 数据 。XML 是 一 套 定义 语义 标记 的 规则 ， 这 些 标 
记 将 文档 分 成 许多 部 件 并 对 这 些 部 件 加 以 标识 。 Gd 言 ， 即 定义 了 用 于 定义 其 他 
与 特定 领域 有 关 的 、 语 义 的 、 结 构 化 的 标记 语言 的 句法 语言 。 


XML 特 点 


e 标记 需要 自己 去 创建 ! 一 个 最 大 的 特殊 处 (与 HTML 不 同 处 ), 它 可 以 创建 标签 ,包括 使 用 中 文 
标签 

e 语法 更 严格 ! 标 签 必需 成 对 诅 套 ,并 且 属 性 必须 有 属性 值 ,属性 值 也 必须 

。 XML 仅仅 用 来 存储 数据 ,不 包含 与 数据 显示 相关 的 样式 信息 (这 部 分 信息 可 以 通过 CSS 等 语 
言 来 传递 )XML 是 具有 语义 的 


书写 XML 


一 个 完整 的 XML 必须 包含 XML 声明 与 一 个 文档 根 元 素 !IXML 声 明 必 须 包 侈 版 本 信息 ,文档 根 元 素 
可 以 是 空 元 素 ,但 一 个 XML 文档 只 能 有 一 个 根 元 素 ! 


<?xml1 version="1.0"?> 
<root /> 


注意 :XML 目前 存在 1.0 与 1.1 两 个 版 本 ,但 浏览 器 只 支持 1.0 版 .XML 声明 的 version 属 性 是 必须 
的 .XML 声明 之 前 不 能 有 任何 东西 ,比如 空格 及 注释 (XML 注释 和 HTML 注 释 是 一 样 的 ).XML 文 档 
只 能 且 必 须 包 含 一 个 根 元 素 , 当 元 素 是 空 元 素 时 需要 闭合 


XML 声明 还 有 其 它 两 个 属性 :standalone 与 encoding.encoding 属 性 用 来 指明 XML 文档 所 使 用 的 
字符 编码 ,如 指定 为 gbk 或 gb2312 则 可 以 使 用 中 文本 ,standalone 属 性 指明 XML 文档 是 否 独立 不 
依赖 于 外 部 文档 ,默认 值 是 yes, 当 使 用 外 部 XML DTD 时 需要 将 这 个 属性 设 为 no 


格式 良好 的 XML 与 有 效 的 XML 


格式 良好 的 XML(Well-formed XML) 是 指 文档 格式 符合 XML 语法 规范 的 XML, 解 释 器 在 解释 一 个 
Not Well-formed XML 的 时 会 出 现 错误 而 停止 ! 


一 个 遵守 XML 语法 规则 ， 并 遵守 相应 DTD 文 件 规 范 的 XML 文档 称 为 有 效 的 XML 文档 (Valid 
XML)。 注意 我 们 比较 "Well-formed XML" 和 "Valid XML"， 它 们 最 大 的 差别 在 于 一 个 完全 遵守 
XML 规范 ， 一 个 则 有 自己 的 "文件 类 型 定义 (DTD)"。 将 XML 文档 和 它 的 DTD 文 件 进行 比较 分 
析 ， 看 是 否 符合 DTD 规 则 的 过 程 叫 validation( 确 认 )。 这 样 的 过 程 通常 我 们 是 通过 一 个 名 为 
parser 的 软件 来 处 理 的 。 


DTD 一 一 文档 类 型 定义 (Document Type Definition) 


由 于 XML 可 以 自 定义 标签 ,那么 自然 各 人 编写 的 标签 不 一 样 ,这 样 同步 数据 便 成 了 问题 ,因为 其 它 
人 不 知道 菜 个 标签 应 该 怎么 用 ,表示 什么 意思 .DTD 就 是 为 了 解决 此 问题 的 ! 


DTD 有 是 一 种 保证 XML 文档 格式 正确 的 有 效 方法 ， 可 以 比较 XML 文档 和 DTD 文 件 来 看 文档 是 否 
符合 规范 ， 元 素 和 标签 使 用 是 否 正确 。 一 个 DTD 文 档 包 含 : 元 素 的 定义 规则 ， 元 素 间 关 系 的 
定义 规则 ， 元 素 可 使 用 的 属性 ， 可 使 用 的 实体 或 符号 规则 。 


DTD 分 为 内 部 DTD 与 外 部 DTD, 内 部 DTD 和 包含 在 XML 文档 中 ,外 部 DTD 则 通过 URL 引 用 .一 个 
DTD 文 件 是 以 .dtd 结 尾 的 文本 文件 


在 XML 中 引入 DTD DOCTYPE 文档 类 型 声明 
内 部 DTD, 可 以 将 standalone 设 置 成 yes. 


<?xml1 version="1.0" standalone="yes"?> 
<!IDOCTYPE root [ 
<!IELEMENT root EMPTY> ]> 


外 部 DTD, 需 要 将 standalone 设 成 no 


<?xml1 version="1.0" standalone="no"?> 
<!DOCTYPE root SYSTEM "http://www.test.org/test.dtd"> 


DOCTYPE 分 析 


DTD 声 明 始 终 以 DOCTYPE 开 头 , 空 一 格 后 跟着 文档 根 元 素 的 名 称 ,如 果 是 内 部 DTD, 则 再 空 一 
格 出 现 [], 在 中 括号 中 是 文档 类 型 定义 的 内 容 . 而 对 于 外 部 DTD, 则 又 分 为 私有 DTD 与 公共 DTD， 
私有 DTD 使 用 SYSTEM 表 示 , 接 着 是 外 部 DTD 的 URL. 而 公共 DTD 则 使 用 PUBLIC, 接 着 是 DTD 
公共 名 称 ,接着 是 DTD 的 URL. 下 面 是 一 些 示例 


公共 DTD,DTD 名 称 格式 为 "注册 // 组 织 // 类 型 标签 /语言 "," 注 册 " 指 示 组 织 是 否 由 国际 标准 化 组 
织 (ISO) 注 册 ,+ 表示 是 ,- 表 示 不 是 ." 组 织 " 即 组 织 名 称 , 如 :W3C; "类 型 "一 般 是 DTD," 标 签 "是 指定 公 
开 文 本 描述 ， 即 对 所 引用 的 公开 文本 的 唯一 描述 性 名 称 ,后 面 可 附带 版 本 号 。 最 后 "语言 "是 
DTD 语 言 的 ISO 639 语 言 标识 符 , 如 :EN 表示 英文 ,ZH 表示 中 文 ,在 下 面 的 地 址 有 完整 的 |SO 639 
语言 标识 符 列表 http://ftp.ics.uci.edu/pub/ietf/http/related/iso0639.txt 


<!DOCTYPE root SYSTEM "http://www.test.org/test.dtd"> 


下 面 是 XHTML 1.0 Transitional 的 DTD. 以 IDOCTYPE 开 始 ,html 是 文档 根 元 素 名 称 ,PUBLIC 表 
是 公共 DTD, 后 面 是 DTD 名 称 ,以 -开头 表示 是 非 ISO 组 织 组 织 名 称 是 W3C,EN 表 示 DTD 语 言 是 
语 ,最 后 是 DTD 的 URL 


示 
英 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml/DTD/xhtml1i-transitional.dtd"> 


注意 :虽然 DTD 的 文件 URL 可 以 使 用 相对 URL 也 可 以 使 

用 绝对 URL, 但 推荐 标准 是 使 用 绝对 URL. 另 一 方面 ,对 于 
公共 DTD, 如 果 解 释 器 能 够 识别 其 名 称 , 则 不 去 查看 URL 
上 的 DTD 文 件 


开始 编写 DTD 
XML 文档 构建 模块 
所 有 的 XML 文档 (以 及 HTML 文档 ) 均 由 以 下 简单 的 构建 模块 构成 : 


。 元 素 ,元 素 即 所 说 的 自 定义 标签 , 它 是 XML 以 及 HTML 文档 的 主要 构建 模块 。 

。 属性 ， 属 性 可 提供 有 关 元 素 的 额外 信息 。 属 性 总 是 被 置 于 某 元 素 的 开始 标签 中 。 属 性 总 是 
以 名 称 / 值 的 形式 成 对 出 现 的 。 

e。 实体 ,实体 是 用 来 定义 普通 文本 的 变量 。 实 体 引 用 是 对 实体 的 引用 。 如 HTML 文 档 中 的 即 
是 一 个 实体 引用 当 文 档 被 XML 解析 器 解析 时 ， 实 体 就 会 被 展开 。 

。 PCDATA , PCDATA 的 意思 是 被 解析 的 字符 数据 (parsed character data) 。 可 把 字符 数 
据 想 象 为 XML 元 素 的 开始 标签 与 结束 标签 之 间 的 文本 。PDATA 是 会 被 解析 器 解析 的 文 
本 。 这 些 文本 将 被 解析 器 检查 实体 以 及 标记 。 文 本 中 的 标签 会 被 当 作 标记 来 处 理 ， 而 实 
体会 被 展开 。 不 过 ， 被 解析 的 字符 数据 不 应 当 包 含 任何 &、< 或 者 > 字符 ; 需要 使 用 &、 
< 以 及 > 实体 来 分 别 替换 它们 。 

。 CDATA , CDATA 的 意思 是 字符 数据 (character data) 。CDATA 是 不 会 被 解析 器 解析 的 
文本 。 在 这 些 文本 中 的 标签 不 会 被 当 作 标记 来 对 待 ， 其 中 的 实体 也 不 会 被 展开 。 


CDATA 


PCDATA 是 指 会 被 解析 的 字符 囊 ,这 解析 是 指 将 其 中 的 实体 引用 换 成 对 应 的 实体 内 容 .也 就 是 说 ， 
一 般 的 XML 中 的 文本 节点 都 是 PCDATA, 当 这 些 文本 中 要 包含 一 些 XML 特 殊 字符 时 ,需要 使 用 实 
体 引用 , 当 这 些 字符 很 少时 ,使 用 实体 引用 还 不 是 很 麻烦 ,而 当 特 殊 字符 很 多 时 , 则 需要 使 用 
CDATA, 即 不 解析 字符 串 . CDATA 区 段 开 始 于 "<![CDATA["， 结 束 于 中 >"CDATA 段 中 可 以 包含 
除 CDATA 限 定 符 之 外 的 任何 字符 


元 素 声明 


元 素 声 明 使 用 <IELEMENT 元 素 名 称 (元 素 内 容 )> 或 <IELEMENT 元 素 名 称 类 别 > 的 语法 


<!ELEMENT root EMPTY> //EMPTY 关 键 字 表示 元 素 是 个 空 元 素 <!1ELEMENT root ANY> //ANY 关 键 字 表示 元 素 中 
// 下 面 这 个 声明 表示 root 中 可 以 有 文本 ,也 可 以 是 空 <1ELEMENT root (#PCDATA)> //() 表 示 一 个 分 组 ,其 中 玫 
// 紧 接着 是 a 或 D <1ELEMENT root (child, (a,b)+)> //*,?3,+ 这 些 量词 可 作用 于 分 组 , 这 里 表示 Foot 元 素 中 
// 紧 接着 是 a 或 b 出 现 一 次 或 多 次 <!1[CDATA[ ABC-abc-ABC><&;&// 这 个 不 并 被 蔡 换 成 & 吧 ]]> 
了 四 
属性 声明 


属性 声明 使 用 <IATTLIST 元 素 名称 属性 名 称 属性 类 型 默认 值 > 的 语法 .示例 如 下 : 





<!ATTLIST input type CDATA "text"> 


上 面 的 属性 声明 表示 :元 素 input 的 type 属 性 值 是 文本 ,默认 值 是 text; 
以 下 是 属性 类 型 表 
类 型 描述 
CDATA 值 为 字符 数据 (character data) 
(en1len2|..) 此 值 是 枚 举 列表 中 的 一 个 值 
ID 值 为 唯一 的 id 
IDREF 值 为 另外 一 个 元 素 的 id 
IDREFS 值 为 其 他 id 的 列表 
NMTOKEN 值 为 合法 的 XML 名 称 
NMTOKENS 值 为 合法 的 XML 名 称 的 列表 
ENTITY 值 是 一 个 实体 
ENTITIES 值 是 一 个 实体 列表 
NOTATION 此 值 是 符号 的 名 称 
xml: 值 是 一 个 预定 义 的 XML 值 


默认 值 参 数 可 以 使 用 下 列 值 


值 解释 


值 属性 的 于 认 值 .该 属性 可 以 出 现 ,也 可 以 不 出 现 , 当 没 有 明确 指定 该 属性 时 ， 
属性 值 使 用 默认 值 

#REQUIRED ”属性 值 是 必需 的 

#IMPLIED 属性 不 是 必需 的 ,可 以 出 现 ,可 以 不 出 现 

#FIXED 


ee 属性 值 是 固定 的 .属性 可 有 可 无 ,但 有 的 时 候 ,其 值 必须 是 value 


<!IATTLIST img src CDATA #REQUIRED> //img 元 素 的 src 属性 是 必须 的 , 值 为 字符 囊 <1ATTLIST script tyr 





一 般 实体 


实体 是 用 于 定义 用 于 定义 引用 普通 文本 或 特殊 字符 的 快捷 方式 的 变量 。 实 体 引 用 是 对 实体 的 
引用 。 实 体 可 在 内 部 或 外 部 进行 声明 。 


一 个 内 部 实体 是 以 <IENTITY 实体 名 称 "实体 的 值 "> 的 形式 声明 的 ,一 个 外 部 私有 实体 是 以 
<IENTITY 实体 名 称 SYSTEM "URI/URL"> 格 式 声 明 ,一 个 外 部 公共 实体 是 以 <IENTITY 实体 
名 称 PUBLIC "公共 实体 名 称 " "URI/URL"> ,其 中 公共 实体 名 称 和 DOCTYPE 中 的 公共 DTD 名 称 
格式 是 一 样 的 . 一 个 实体 引用 是 & 实 体 名 称 ; 格 式 


// 实 体 定义 <!ENTITY abc "ABCabcABC"> // 内 部 实体 <!ENTITY abc SYSTEM "abc,ent"> // 外 部 私有 实体 
// 实 体 引 用 <abc>&abc;</abc> 


加 让 





参数 实体 


参数 实体 是 只 在 DTD 中 使 用 的 实体 (并 且 参数 实体 只 能 在 外 部 DTD 中 声明 ), 它 的 声明 语法 与 一 
般 实体 不 同 处 在 于 其 要 在 实体 名 称 前 加 个 百 分 号 ,而 引用 时 则 使 用 % 实 体 名 称 ; 的 形式 


<!IENTITY % abc "root"> 
<!ELEMENT %abc; (chil1d)>// 这 多 将 声明 元 素 root, 具有 一 个 子 元 素 child 


XML 命名 空间 


XML 命名 空间 可 提供 避免 元 素 命名 冲突 的 方法 。 MR 当 两 个 不 
同 的 文档 使 用 相同 的 元 素 名 时 ， 就 会 发 生命 名 冲突 。 命 名 空间 其 实 就 是 给 这 些 标签 名 加 个 前 


级 | 


<root> 
<svg:template /> 
<xsl:template /> 
</root> 


现在 ,root 下 仍然 是 两 个 template 元 素 ,它们 的 节点 名 称 仍然 是 template, 但 是 它们 的 意义 不 一 样 
了 ,因为 它们 使 用 了 不 同 的 前 组 ! 但 是 XML 命名 空间 前 组 需要 声明 才 可 以 使 用 ,如 果 不 声明 , 则 被 
视 为 元 素 名 称 的 一 部 分 1 XML 命名 空间 属性 被 放置 于 某 个 元 素 的 开始 标签 之 中 ， 并 使 用 以 下 的 
语法 : xmlns:namespace-prefix="namespaceURI" . 当 一 个 命名 空间 被 定义 在 某 个 元 素 的 开始 
标签 中 时 ， 所 有 带 有 相同 前 组 的 子 元 素 都 会 与 同一 个 命名 空间 相关 联 。 注意 ,用 于 标示 命名 空 
间 的 地 址 不 会 被 解析 器 用 于 查找 信息 。 其 惟一 的 作用 是 赋予 命名 空间 一 个 惟一 的 名 称 。 不 
过 ， 很 多 公司 常常 会 作为 指针 来 使 用 命名 空间 指向 菜 个 实 存 的 网 页 ， 这 个 网 页 包含 着 有 关 命 
名 空间 的 信息 。 

<root xmlns:svg="http://www.svg.org" xmlns:xsl="http://www.xsl.org"> 

<svg:template /> 


<xsl:template /> 
</root> 


这 样 ,为 了 区 分 那些 名 称 相 同 而 含义 不 同 的 元 素 , 必 须 在 每 个 元 素 名 前 面 加 前 级 .其 实 还 可 以 在 父 
级 元 素 上 声明 默认 命名 空间 ,让 所 有 没有 前 级 子 元 素 的 默认 使 用 此 命名 空间 .HTML 的 命名 空间 
便 是 一 个 例子 . 


<html xmlns="http://www.w3.0org/1999/xhtml"> 
</html> 


对 于 使 用 命名 空间 的 XML 文 档 ， 其 DTD 中 对 元 素 的 声明 
也 应 该 包含 命名 空间 前 缀 ( 即 应 与 文档 中 所 书写 的 一 致 ). 
另外 ,命名 空间 不 但 作用 于 元 素 , 还 作用 于 属性 


javascript 快 速 入 门 25-- 浏 览 器 中 的 XML 


打开 XML 


首先 ,直接 从 浏览 器 中 打开 XML 文件 ,浏览 器 会 对 其 进行 格式 良好 性 检查 ,如 果 不 符 合 XML 语法 
规范 则 显示 出 错 ,如 果 格 式 良 好 ,再 检查 是 否 包含 样式 表 (CSS 或 XSL), 如 果 包 含 样式 表 , 则 用 样式 
表格 式 化 XML 文档 然后 显示 ,如 果 没 有 , 则 显示 经 过 格式 化 的 XML 源码 (不 同 浏览 器 显示 方式 不 
一 样 ). 注 意 ,浏览 器 只 对 XML 进行 格式 良好 性 检查 ,而 不 对 其 进行 有 效 性 检查 ! 如 何在 XML 文档 中 
引入 样式 表 ? 示 例 : 


<?Xxml version="1.0" standalone="no"?> 
<?xml-stylesheet type="text/css" href="test.css"?> 


如 果 是 使 用 XSL, 只 需 将 上 面 的 type 属 性 值 改 成 text/xsl 即 可 ! 


XMLHttpRequest 对 象 的 responseXML 属 性 


XMLHttpRequest 对 象 的 responseXML 属 性 用 来 获取 从 服务 器 端 返回 的 XML 文件 ,如 果 没 有 则 
为 null. 注 意 ,只 有 在 服务 器 环境 下 ,请 求 一 个 以 .xm| 为 后 级 的 文件 返回 的 才 会 是 一 个 XML DOM,， 
在 本 地 请 求 一 个 XML 文件 ,返回 的 仍 是 文本 文件 .如 果 要 使 用 服务 器 脚本 生成 字符 串 , 要 返回 
XML, 必须 加 上 一 些 头 信息 


//JS Code 
var xhr = XHR();//XHR 为 之 前 所 写 的 可 以 跨 浏 览 器 创建 XMLHttpRequest 对 象 的 函数 
xhr.open("get","test.php",true); 
xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status == 200) { 
alert(xhr.responseXML.documentElement.nodeName);// 可 以 使 用 DOM 2 Core 的 一 些 属 性 和 


}; 

xhr.send(null); //PHP Code 

header("Content-Type:text/xml");// 发 送 MIME 信 息 

echo <<<XML <?xml version="1.0" encoding="gbk"?> 
<root /> 

XML， 


| 一 一 一 
更 简单 的 方法 :直接 加 载 XML 文 件 


浏览 器 也 提供 了 直接 加 载 XML 文 件 的 方法 ,但 也 仅仅 火狐 与 Windows 平 台 上 的 |E 支 持 而 已 .同样 ， 
两 者 之 间 的 实现 也 有 很 大 的 差别 的 ! 





IE 中 的 XML DOM 


微软 在 JavaScript 中 引入 了 用 于 创建 ActiveX 对 象 的 ActiveXObject 类 。ActiveXObject 的 构造 函 
数 只 有 一 个 参数 一 “要 进行 实例 化 的 ActiveX 对 象 的 字符 串 代 号 。 例 如 ，XML DOM 对 象 的 第 
一 个 版 本 称 为 Microsoft.XmlDom。 所 以 ， 要 创建 这 个 对 象 的 实例 ， 使 用 以 下 代码 : 


var xmlDom = new ActiveXOobject("Microsoft.XmlDom"); 


IE 中 的 XML DOM 支 持 的 最 新 版 本 是 5.0,IE 中 存在 以 下 版 本 的 XML DOM 实 现 : 


。 Microsoft.XmlDom (最 原始 的 ) 
MSXML2.DOMDocument 
MSXML2.DOMDocument.3.0 
MSXML2.DOMDocument.4.0 
MSXML2.DOMDocument.5.0 


自然 地 ， 只 要 可 能 ， 大 家 都 会 选择 最 新 的 XML DOM 的 版 本 ， 因 为 新 版 会 提高 速度 ， 添 加 一 些 
新 的 功能 如 验证 等 。 但 是 ， 如 果 党 试 创建 不 存在 于 客户 端 机 器 上 的 ActiveX 对 象 ，IE 就 会 抛 出 
错误 并 停止 所 有 执行 。 所 以 ， 为 确保 使 用 了 正确 的 XML DOM 版 本 ， 也 为 避免 任何 其 他 错误 ， 
我 们 可 以 创建 一 个 函数 来 测试 每 个 XML DOM 字 符 串 ， 出 现 错误 即 捕获 : 


function XMLDOM() { var xmlDomVers = [ "Microsoft.XmlDom", "MSXML2.DOMDocument", "MSXML2 
} catch(e) {continue;} 





接 下 来 就 是 载 入 XML. 微软 的 XML DOM 有 两 种 载 入 ML 的 方法 : loadXML() 和 load()。 
loadXML() 方 法 可 直接 向 XML DOM 输 入 XML 字符 串 .load() 方 法 用 于 从 服务 器 上 载 入 XML 文 
件 。 不 过 ，load() 方 法 只 可 以 载 入 与 包含 JavaScript 的 页 面 存 储 于 同一 服务 器 上 的 文件 ， 也 就 
是 说 ， 不 可 以 通过 其 他 人 的 服务 器 载 入 XML 文件 。 load 方 法 还 有 两 种 载 入 文件 的 模式 : 同步 
和 异步 。 以 同步 模式 载 入 文件 时 ，JavaScript 代 码 会 等 待 文件 完全 载 入 后 才 继 续 执 行 代码 ; 而 
以 异步 模式 载 入 时 ， 不 会 等 待 ， 可 以 使 用 事件 处 理 函 数 来 判断 文件 是 否 完全 载 入 了 。 默 认 情 
况 下 ， 文 件 按照 异步 模式 载 入 。 要 进行 同步 载 入 ， 只 需 设置 async 特 性 为 false : 


//Only For IE 

var xmlDom = XMLDOM( ) ; 

xmlDom.loadXML("<root />"); 

alert(xmlDom.documentElement.nodeName); var xml = XMLDOM(); 

xml.async = false;// 同 步 载 入 

xml.load("test.xml"); 

alert(xml.documentElement.firstChild.nodeValue); // 同 步 加 载 时 需要 使 用 readystatechange 事 件 

Var xml2 = XMLDOM(); 

xm12.async=true;// 可 以 不 指定 ， 默认 是 弄 步 载 入 的 

xml2.onreadystatechange = function () {// 必 须 在 调用 load 方 法 前 分 配 此 事件 处 理 函 数 

if (xml2.readyState==4) {//readyState 的 含义 和 XHR 对 象 是 一 样 的 

// 注 意 这 里 没有 使 用 this, 因为 TE 下 的 ActiveX0bject 很 特殊 ,使 用 this 会 出 错 
alert(xml2.,xml);// 与 ijnnerHTML 属 性 类 似 , IE 中 的 Xml 属性 返回 XML 字符 串 形 式 的 源码 
// 但 注意 ,IE 中 的 XMLDOM 对 象 的 Xml 属性 是 只 读 的 





ne 
加 本 于 一 
在 尝试 将 XML 载 入 到 XML DOM 对 象 中 时 ， 无 论 使 用 oadXML() 方 法 还 是 load() 方 法 ， 都 有 可 能 


出 现 XML 格 式 不 正确 的 情况 。 为 解决 这 个 问题 ， 微 软 的 XML DOM 的 parseError 的 特性 包含 了 
关于 解析 XML 代码 时 所 遇 到 的 问题 的 所 有 信息 。 





parseError 特 性 实际 上 是 包含 以 下 特性 的 对 象 : 


e。 errorCode 一 一 表示 所 发 生 的 错误 类 型 的 数字 代号 ( 当 没 有 错误 时 为 0 ) 
。 fiePos 荐 误 发 生 在 文件 中 的 位 置 

。 line 一 一 遇 到 错误 的 行 号 

。 linepos 一 一 在 遇 到 错误 的 那 一 行 上 的 字符 的 位 置 











。 reason 对 错误 的 一 个 解释 
。 srcText 造成 错误 的 代码 
e@ ur 造成 错误 的 文件 的 URL (如 果 可 用 ) 





内 


当 直 接 对 parseError 自 身 取 值 ， 它 会 返回 errorCode 的 值 ， 也 就 是 说 可 以 这 样 进行 检 


if (xmlDom,parseError===0) { 
alert(" 没 有 出 错 1"); 

} else { var er = xmlDom.parseError; 
alert("XML 解 析出 错 1 错误 信息 如 下 :\n\ 
错误 代号 : "+er .errorCode+"\n\ 
文件 :"+er .filePos+"\n\ 

行 :"++er .line+"\n\ 
字符 :"+er .linepos+"\n\ 
相关 信息 :"+er .reason+"\n\"); 


Mozilla 中 的 XML DOM 


与 Mozilla 其 他 方面 一 样 ， 它 提供 的 XML DOM 版 本 要 比 IE 的 更 加 标准 。 Mozilla 中 的 XML DOM 
实际 上 是 它 的 JavaScript 实 现 ， 也 就 是 说 它 不 仅 与 浏览 器 一 起 衍化 ， 同 时 它 能 可 靠 地 在 Mozilla 
支持 的 所 有 平台 上 使 用 。 因 此 与 不 能 在 Macintosh 上 使 用 XML DOM 的 IE 不 同 ，Mozilla 的 支持 

跨越 了 平台 的 界限 。 另 外 ，Mozilla 的 XML DOM 实 现 了 支持 DOM Level 2 的 功能 ， 而 微软 的 ， 
仅 支持 DOM Level 1。 


DOM 标 准 指出 ，document.implementation 对 象 有 个 可 用 的 createDocument() 方 法 。Mozilla 严 
格 遵循 了 这 个 标准 ， 可 以 这 样 创 建 XML DOM : 


Var xmlDom = document.implementation.createDocument("","",null); 


createDocument() 的 三 个 参数 分 别 是 文档 的 命名 空间 URL ， 文 档 元 素 的 标签 名 以 及 一 个 文档 
类 型 对 象 (总 是 为 null， 因 为 在 Mozilla 中 还 没有 对 文档 类 型 对 象 的 支持 ) 。 前 面 这 行 代码 创建 
一 个 空 的 XML DOM 。 要 创建 包含 一 个 文档 元 素 的 XML DOM， 只 需 将 标签 名 作为 第 二 个 参 

数 : 


var xmlDom = document.implementation.createDocument("","root",null); 


这 行 代 码 创建 了 代表 XML 代 码 <root/> 的 XML DOM 。 如 果 在 第 一 个 参数 中 指定 了 命名 空间 
URL ， 可 进一步 定义 文档 元 素 : 


var xmlDom = document.implementation.createDocument("http://www.x-do.org", "root",null); 
| 
这 行 代码 创建 了 表示 <root xmlns="http://www.x-do.org"/> 的 XML DOM 


与 微软 的 XML DOM 不 同 ，Mozilla 只 支持 一 个 载 入 数据 的 方法 : load()。Mozilla 中 的 load() 方 
法 和 IE 中 的 load() 工 作 方 式 一 样 。 只 要 指定 要 载 入 的 XML 文 件 ， 以 及 同步 还 是 异步 (默认) 载 
入 。 如 果 同 步 载 入 ML 文件 ， 代 码 基 本 上 |E 差 不 多: 


Var xmlDom = document.implementation.createDocument("","root",null); 
xmlDom.async = false;// 同 步 载 入 
xmlDom.1load("test .xml"); 


与 IE 不 同 的 是 ,同步 载 入 时 ,并 没有 readychange 事 件 , 而 只 有 load 事 件 ,并 且 只 有 加 载 完 毕 一 种 状 


态 ! 


Var xmlDom = document.implementation.createDocument("","root",null); 
xmlDom.async = true;// 蜡 步 载 入 
xmlDom.onload = function () { 
alert(this.documentElement.childNodes.item(0).tagName); // 对 于 JS, 访 问 节 点 列表 既 可 以 用 
}; 


xmlDom.1load("test .xml"); 


LE 





另外 ,麻烦 的 是 ,Mozilla 的 XML DOM 不 支持 loadXML() 方 法 。 要 将 XML 字符 串 解 析 为 DOM， 必 
须 使 用 DOMParser 对 象 ,使 用 其 parseFromString 方 法 传 入 XML 字符 串 表 现形 式 : 
Var xmlParser = new DOMParser(); var xmlDom = xm]lParser.parSseFromString("<root />","text 


// 第 二 个 参数 text/xml 也 可 以 是 application/xml, 两 者 都 用 来 解析 XML 
// 还 可 以 是 application/xhtml+xml, 用 来 解析 XHTML, 只 能 用 这 三 种 MIME 





| 





与 直接 解析 XML 字符 串 相 对 应 的 获取 XML 字符 串 的 方法 ,上 中 XML DOM 对 象 具有 只 读 的 xml 属 
性 ,而 Mozilla 则 没有 相对 应 的 属性 ,但 是 ，Mozilla 提 供 了 可 以 用 于 同样 的 目的 的 XMLSerializer 
对 象 : 


Var Serializer= new XMLSerializer(); var xmlStr = serializer.serializeToString(xmlDom,"t 
// 而 text/xml 也 可 为 application/xml 


‘| 了 
对 于 XML 解析 错误 ,Mozilla 的 实现 方式 非常 麻烦 ， PE 误 ,而 是 
将 错误 信息 作为 一 个 XML 文档 返回 ,要 获取 具体 的 错误 信息 ,还 必须 用 解析 其 中 的 字符 串 ! 








var xmlParser = new DOMParser(); var xmlDom = xmlParser.parseFromString("<root><child></ 
alert(xmlDom.documentElement .nodeName);// 将 返回 parsererror, 因为 文档 解析 出 错时 
Var serializer = new XMLSerializer(); var str = serializer.serializeToString(xmlDom," 
alert(str);// 将 输出 类 似 下 面 内 容 
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> XML 解析 错误 
位 置 : file:///E:/XML/test.html 
行 :1， 列 :16:<sourcetext>&lt;root&gt;&lt;child&gt;&lt;/root&gt; 
--------------- A</sourcetext></parsererror> 


国 要 = 关于 
而 从 其 中 抽取 出 诸如 行 号 这 些 错误 信息 ,只 好 使 用 正则 表达 式 了 | 但 是 由 于 浏览 器 的 语言 设置 不 


同 ,使 用 正则 表达 式 也 是 困难 重重 的 ! 可 以 看 到 ,虽然 Mozilla 对 XML DOM 的 实现 更 标准 ,但 是 使 
用 起 来 是 非常 不 方便 的 | 





跨 浏 览 器 的 XML DOM 构 造 函 数 


说 它 跨 浏览 器 ,其 实 也 仅仅 是 兼容 Mozilla 与 Windows 上 的 IE 而 已 ， a 它 浏览 器 , 则 可 以 降 
级 ,考虑 使 用 XHR 的 responseXML, 虽 然 XHR 对 象 该 属性 没有 提供 什么 高 级 的 方便 的 方法 ,但 用 
于 读 取 XML 已 经 足够 了 ! 


if (document.implementation && document .implementation.createDocument ) { //W3C 
var getXMLDOM=function () {V// 获 取 一 个 XMLDOM 对 象 
return document.implementation.createDocument("","",null); 


loadXMLFile=function (xmlDom, url,callback) { if (xmlDom.async===true) { 
xmlDom.onload=function () { if (xmlDom.documentElement.nodeName=="parsererror 
} else { 
callback.call(xmlDom); 
} 


}; 
xmlDom.load(url); return xmlDom; 


loadXMLString=function (xmlDom,s) { var p = new DOMParser(); var newDom=p.parseFromst 

} while (xmlDom.firstChild) { 
xmlDom.removeChild(xmlDom.firstcChild); 

} for (var i=0,n;i<newDom.childNodes.length;i++) { 
n=xmlDom.importNode(newDom.childNodes[i],true); //importNode 用 于 把 其 它 文档 中 的 节 
//true 参 数 同时 导入 子 节 点 

xmlDom.appendchild(n); 
} return xmlDom; 


getXML=function (xmlNode) { var s= new XMLSerializer(); return s.serializeToString(xm 
}; 
} else if (window.ActiveXOobject) { //IE 

Var getXMLDOM=function () { return new ActiveXobject("Microsoft.XmlDom"); 
},loadXMLFile=function (xmlDom,url,callback) { 

xmlDom.onreadystatechange=function () { if (xmlDom.readyState===4) { if (xmlDom.p 

callback.call(xmlDom); 
} else { throw new Error("XML Parse Error:"+xmlDom.parseError.reason); 


} 
} 
}; 


xmlDom.1load(url); return xmlDom; 

},loadXMLString=function (xmlDom,s) { 
xmlDom.loadXML(s); If (xmlDom.parseError.errorCode!==0) { throw new Error("XML Pa 
} return xmlDom; 


getXML=function (xmlNode) { return xmlNode.xml; 


}; 


| 





javascript 快 速 入 门 26--XPath 


XPath 简介 


XPath 是 一 门 在 XML 文档 中 查找 信息 的 语言 。XPath 可 用 来 在 XML 文档 中 对 元 素 和 属性 进 
行 遍历 。XPath 是 W3C XSLT 标准 的 主要 元 素 ， 并 且 XQuery 和 XPointer 同时 被 构建 于 
XPath 表达 之 上 。 因 此 ， 对 XPath 高 级 XML 应 用 的 基础 。 其 实 对 些 我 们 并 不 
陌生 ,最 与 XPath 相 似 的 便 是 CSS 的 选择 器 .在 CSS 中 使 用 CSS 选 择 符 选择 择 元 素来 应 用 样式 ,而 在 


XSLT 中 则 使 用 XPath,XPath 与 CSS 选 择 器 相 比 如 强大 的 许多 ! 下 面 是 CSS 选 择 符 与 XPath 选 择 
符 一 些 对 照 : 


//CSS 选 择 符 
body p // 选 择 所 有 body 下 面 的 p 元 素 
body>p // 选 择 body 的 子 元 素 p 
* // 选 择 所 有 的 元 素 
// 与 之 对 应 的 XPath 选择 符 
body//p 
body/p 


虽然 现在 还 不 能 了 解 这 些 XPath 表 达 的 含意 ,但 可 以 发 现 , 它 和 CSS 选 择 符 十 分 相像 ! 但 XPath 有 
更 强大 的 地 方 ,比如 它 可 以 定位 到 body 元 素 下 具体 位 置 上 的 p 或 可 以 选择 前 N 个 p: 


body/p[position()=4] // 这 个 XPath 表 达 式 将 选取 body 子 元 素 中 第 4 个 p 元 素 , 注意 这 里 从 1 开始 计数 
body/p[position()<3] // 将 选取 body 子 元 素 中 前 两 个 p 元 素 


XPath 使 用 路 径 表 达 式 来 选取 XML 文档 中 的 节点 或 者 节点 集 。 ee 
的 电脑 文件 系统 中 看 到 的 表达 式 非 常 相 似 。 另 外 ,XPath 含有 超过 100 个 内 建 的 函数 。 这 些 函 
数 用 于 字符 串 值 、 数 值 ， 日 期 和 时 间 比 较 、 节 点 和 QName 处 理 、 序 列 处 理 、 逻 辑 值 和 ° 


书写 XPath 


XPath 使 用 路 径 表 达 式 在 XML 文档 中 选取 节点 。 节 ， 路 径 (path) 或 者 步 (step) 来 
选取 的 6 如 "1" 表 示 文档 节 节 点 ,"." 表 示 当 前 节 点 ,而 ".." 则 表示 当前 点 的 父 节 点 .示例 : 


{ 因 为 XPath 表示 达 式 中 有 斜 杠 ， 所 以 暂时 用 这 个 表示 注释 ! 

/ {选取 文档 节点 , nodeType 为 9 

/root {选取 文档 根 元 素 ， 类 似 于 文件 系统 的 路 径 (Unix)，, 以 /开头 的 路 径 都 是 绝对 路 径 
/root/child/.. {选取 根 节 点 root 的 子 节 点 child 的 父 节点 (就 是 root) 


下 面 是 一 些 常 用 路 径 表 达 式 


e nodeName 选取 名 称 为 nodeName 的 节 


/ 从 根 节 点 选取 

e /| 选择 元 素 后 代 元 素 ,必须 在 后 面 跟 上 nodeName 
。 .选取 当前 节点 

.. 选取 当前 节点 的 父 节点 

@ 选取 属性 节点 (@ 是 attribute 的 缩写 ) 


<?xml1 version="1.0"?> 
<root> 
<child attr="attr" /> 
<child> 
<a><desc /></a> 
</child> 
</root> 


{ 针 对 上 面 的 XML 文档 的 XPath 结果 ,当前 节点 为 document 
/root {选取 root 

root {选取 root 

child { 空 ,因为 child 不 是 document 的 子 元 素 
//child {选取 两 个 child 元 素 , // 表 示 后 代 

//Q@attr {选取 attr 属 性 节点 

/root/child//desc {返回 child 的 后 代 元 素 desc 


谓语 (Predicates ) 


谓语 用 于 在 查找 节点 时 提供 更 详尽 的 信息 ,谓语 被 甬 在 方 括 号 中 。 下 面 是 一 些 带 有 谓语 的 
XPath 表达 式 : 


/root/child[3] { 选 取 root 元 素 的 第 三 个 chi1d 子 元 素 , 注意 , 这 和 数组 下 标 不 一 样 , 从 1 开始 计数 
//child[@attr] {选取 所 有 具有 属性 attr 的 child 元 素 
//child[@attr="val"]/desc {选取 所 有 属性 attr 的 值 为 val 的 child 元 素 的 子 元 素 desc 
//child[desc] {选取 所 有 的 有 desc 子 元 素 的 child 
//child[position()>3] {position() 是 XPath 中 的 一 个 函数 ,表示 节点 的 位 置 
//child[@attr>12] {XPath 表 达 式 还 可 以 进行 数值 比较 ,该 表达 式 将 选取 attr 属 性 值 大 于 12 的 child 元 素 
//child[last()] {last() 函 数 返回 节点 列表 最 后 的 位 置 ， 该 表达 式 将 选取 最 后 一 个 chi1d 元 素 


通配符 


XPath 通配符 可 用 来 选取 未 知 的 XML 元 素 。 


o ,和 CSS 中 的 选择 符 一 样 ,这 将 匹配 任何 元 素 节 点 
。 @* ,匹配 任何 属性 节点 
。 node() ,匹配 任何 类 型 的 节点 


/root/* {选取 根 元 素 下 面 的 所 有 子 元 素 
/root/node() {选取 根 元 素 下 面 的 所 有 节点 ， 包括 文本 节点 
//* {选取 文档 中 所 有 元 素 
//child[@*] {选取 所 有 具有 属性 的 child 元 素 
//@* {选取 所 有 的 属性 节点 


组 合 路 径 


与 CSS 中 使 用 逗号 组 合 使 用 多 个 选择 符 一 样 ,XPath 支 持 一 种 使 用 "|" 来 组 合 多 个 路 径 的 语法 ! 


/root | /root/child {选取 根 元 素 root 与 它 下 面 的 子 元 素 child 


//child | //desc {选取 所 有 的 child 元 素 与 desc 元 素 


XPath 运 厚 符 


下 面 列 出 了 可 用 在 XPath 表达 式 中 的 运算 符 : 


| ,计算 西 个 节点 集 
o ,加 法 
o ,减法 


o ,乘法 
div ,除法 ,因为 /已 经 被 作为 路 径 符 了 ,所 以 不 能 用 来 作为 除法 标识 
mod , 取 余 
= ,等 于 
!= ,不 等 于 
< ,小 于 

= ,小 于 或 等 于 
> ,大 于 
>= ,大 于 或 等 于 
Or ,或 
and ,与 


XPath 轴 


轴 可 定义 某 个 相对 于 当前 节点 的 节点 集 。 下 面 一 可 用 的 轴 名 称 与 对 应 的 结果 


ancestor 选取 当前 节点 的 所 有 先辈 ( 父 、 祷 父 等 ) 

ancestor-or-self 选取 当前 节点 的 所 有 先 华 ( 父 、 祖 父 等 ) 以 及 当前 节点 本 身 
attribute 选取 当前 节点 的 所 有 属性 

child 选取 当前 节点 的 所 有 子 元 素 。 

descendant 选取 当前 节点 的 所 有 后 代 元 素 〈 子 、 和 孙 等 ) 。 

descendant-or-self 选取 当前 节点 的 所 有 后 代 元 素 ( 子 、 J 以 及 当前 节点 本 身 。 
following 选取 文档 中 当前 节点 的 之 后 的 所 有 节 

namespace 选取 当前 节点 Sa 空间 节点 

parent 选取 当前 节点 的 父 


。 preceding 选取 文档 中 当前 节点 的 开始 标签 之 前 的 所 有 节 
。 preceding-sibling 选取 当前 节点 之 前 的 所 有 同 级 节点 
。 self 选取 当前 节点 。 


事实 上 ,一 个 完整 的 XPath 表达 式 由 "/" 与 " 步 " 构 成 的 ,而 步 又 是 由 " 轴 " 、" 节 点 测试 "和 "谓语 "构成 
的 .如 下 : 


step/step/..... {一 个 XPath 表 达 式 
(pn. 
轴 名 称 : : 节点 测试 [谓语 ] 


在 一 般 的 XPath 表 达 式 中 ,没有 谓语 即 表 达 没 有 其 它 条 件 限 制 ,而 没有 轴 名 称 , 则 默认 使 用 child. 
如 "abc" 与 "child::abc" 是 等 效 的 , 下 面 是 一 些 与 使 用 轴 名 称 等 效 的 简单 XPath 表 达 式 : 


® child::abc --------------------- abc( 子 元 素 abc) 

e。 root/attribute::id ------------ root/@id(root 的 属性 id) 
e selft::node() ------------------ .( 自 身 ) 

。 parent::node() --------------- ..( 父 节点 ) 

e Child:: -————-———-———-————-—----——- ( 子 元 素 ) 

e child::text() ------------------ text()( 子 文本 节点 ) 

。 descendant::tag ------------ .//tag (后 代 tag 元 素 ) 


XPath 还 包含 一 套 函 数 库 , 如 position 与 last 就 是 函数 ,一 般 的 函数 被 用 在 谓语 中 ,而 在 XSLT 及 
XQuery 中 它们 则 得 到 了 更 广泛 的 使 用 . 


浏览 矣 中 的 XPath 


IE 浏览 器 对 XPath 的 实现 比较 简单 .一 个 XML DOM 对 象 ( 及 每 个 节点 ) 都 有 selectSingleNode 与 
selectNodes 方 法 , 传 入 XPath 表达 式 ,selectNodes 返 回 匹配 的 节点 列表 ,而 selectSingleNode 则 
只 返回 列表 中 第 一 个 项 目 ! 


var xmlDom = getXMLDOM( ) ;// 我 们 之 前 写 的 跨 济 | 览 器 的 XML DOM 加 载 函 数 
loadXMLFile(xmlDom, "text.xml"); var root = xmlDom.selectSingleNode("V/x*");V/ 返 回 文档 根 元 
root = xmlDom.selectNodes("/*")[0];// 同 上 
var lastchild = xmlDom.selectSingleNode("/*/*[last()]"); 


二" 
Mozilla 是 根据 DOM 标 准 来 实现 对 XPath 的 支持 的 。 DOM Level 3 附加 标准 DOM Level 3 XPath 


定义 了 用 于 在 DOM 中 计算 XPath 表达 式 的 接口 。 遗 憾 的 是 ， 这 个 标准 要 比 微软 直观 的 方式 复 
杂 得 多 。 


虽然 有 好 多 与 XPath 相关 的 对 象 ， 最 重要 的 两 个 是 : XPathEvaluator 和 XPathResult 。 
XPathEvaluator 利 用 方法 evaluate() 计 算 XPath 表 达 式 。 


evaluate() 方 法 有 五 个 参数 : XPath 表达 式 、 上 下 文 节点 、 命 名 空间 解释 程序 和 返回 的 结果 的 
类 型 ， 同 时 ， 在 XPathResult 中 存放 结果 (通常 为 null) 。 


命名 空间 解释 程序 ， 只 有 在 XML 代码 用 到 了 XML 命名 空间 时 才 是 必要 的 ， 所 以 通常 留 空 ， 置 
为 null。 返 回 结 果 的 类 型 ， 可 以 是 以 下 十 个 常量 值 之 一 : 


。 XPathResult.ANY_TYPE- 返回 符合 XPath 表达 式 类 型 的 数据 

。 XPathResult.ANY_UNORDERED_NODE_TYPE 一 一 返回 匹配 节点 的 节点 集合 ， 但 顺序 
可 能 与 文档 中 的 节点 的 顺序 不 匹配 

。 XPathResult.BOOLEAN_TYPE 一 一 返回 布尔 值 

。 XPathResult.FIRST_ORDERED_NODE_TYPE 一 一 返回 只 包含 一 个 节点 的 节点 集合 ， 且 
这 个 节点 是 在 文档 中 第 一 个 匹配 的 节点 

。 XPathResult.NUMBER_TYPE 一 一 返回 数字 值 

。 XPathResult.ORDERED_NODE_ITERATOR_TYPE 一 一 返回 匹配 节点 的 节点 集合 ， 顺 
序 为 节点 在 文档 中 出 现 的 顺序 。 这 是 最 常用 到 的 结果 类 型 

。 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE 一 一 返回 节点 集合 快照 ， 在 文档 外 
捕获 节点 ， 这 样 将 来 对 文档 的 任何 修改 都 不 会 影响 这 个 节点 列表 。 节 点 集合 中 的 节点 与 
它们 出 现在 文档 中 的 顺序 一 样 

。 XPathResult.STRING_TYPE- 返回 字符 串 值 

。 XPathResult.UNORDERED_NODE _ITERATOR_TYPE 一 一 返回 匹配 节点 的 节点 集合 ， 
不 过 顺序 可 能 不 会 按照 节点 在 文档 中 出 现 的 顺序 排列 

。 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE 一 一 返回 节点 集合 快照 ， 在 文 
档 外 捕获 节点 ， 这 样 将 来 对 文档 的 任何 修改 都 不 会 影响 这 个 节点 列表 。 节 点 集合 中 的 节 
点 和 文档 中 原来 的 顺序 不 一 定 一 样 。 


下 面 是 使 用 ORDERED_NODE_ITERATOR_TYPE 的 例子 : 


var xmlDom = getXMLDOM( ) ;// 我 们 之 前 写 的 跨 浏览 器 的 XML DOM 加 载 函 数 
loadXMLFile(xmlDom, "text.xm1"); var evaluator = new XPathEvaluator(); var result =eva 
while(node=result.iterateNext()) {// 这 个 列表 必须 使 用 iterateNext 方 法 遍历 
alert(node. tagName); 





javascript 快 速 入 门 27--XSLT 基 础 


XSL 与 XSLT 


XSL 指 扩展 样式 表 语 言 (EXtensible Stylesheet Language) 。 它 主要 被 用 来 对 XML 文档 进行 
格式 化 ,与 CSS 不 同 ,XSL 不 仅仅 是 样式 表 语 言 XSL 主 要 包括 三 个 部 分 : 


。 XSLT 一 种 用 于 转换 XML 文档 的 语言 。 它 可 以 将 一 个 XML 文件 转换 成 另 一 种 格式 的 XML 
文件 或 XHTML 文件 . 

。 XPath 一 种 用 于 在 XML 文档 中 导航 ,定位 元 素 的 语言 。 

。 XSL-FO , 可 扩展 样式 表 语言 格式 化 对 象 (Extensible Stylesheet Language Formatting 
Objects) ,用 于 格式 化 供 输出 的 XML 数据 。XSL-FO 目前 通常 被 称 为 XSL (尽管 这 算是 
一 种 误解 ,但 这 样 说 是 可 以 的 ,因为 在 格式 化 XML 方面 ,XSL-FO 起 着 和 CSS 一 样 的 作用 有 


XSLT 指 XSL 转换 (XSL Transformations) 。 它 是 XSL 中 最 重要 的 部 分 。 通 过 XSLT， 您 可 
以 向 或 者 从 输出 文件 添加 或 移 除 元 素 和 属性 。 您 也 可 重新 排列 元 素 ， 执 行 测试 并 决定 隐藏 或 
显示 哪个 元 素 ， 等 等 。 描 述 转化 过 程 的 一 种 通常 的 说 法 是 ，XSLT 把 XML 源 树 转换 为 XML 结 
果树 。 


书写 XSLT 


XSLT 文件 本 身 也 是 XML 文件 ,一 般 以 .xml .xsl .xslt 几 种 文件 后 级 名 保存 .XSLT 遵 循 XML 的 语 
法 ,文件 开头 一 般 都 加 有 XML 声明 ,XML 声明 之 后 是 文档 根 元 素 stylesheet 或 transform( 两 者 之 
一 ), 并 且 使 用 version 属 性 声明 XSLT 版 本 ,目前 版 本 是 1.0,2.0 还 在 草案 中 ,XSLT 的 所 有 内 置 元 素 
都 从 属于 "http://www.w3.org/1999/XSL/Transform" 命 名 空间 ,所 以 应 该 在 文档 根 元 素 上 声明 一 
个 xs| 或 XS 的 命名 空间 ! 


<?xml1 version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XsL/Transform" /> 


上 面 创建 了 一 个 最 基本 的 XSLT 文 件 , 将 其 应 用 于 任何 XML 文 档 , 在 支持 XSLT 的 浏览 器 打开 该 
XML 文档 ,会 看 到 所 有 的 文档 显示 了 出 来 ,而 标签 没有 了 ! 事 实 上 ,在 浏览 器 中 站 正 显 示 的 是 
HTML,XSLT 将 XML 转换 成 了 HTML. 我 们 可 以 更 进一步 指定 转换 成 HTML 的 版 本 ,比如 转换 成 
XHTMLI 


<?Xxml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XxsL/Transform"> 


<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Tran 
</xsl:stylesheet> 


4 四 








output 元 素 定义 输出 文档 的 格式 。method 属 性 可 接受 Xml,html,text,name 四 种 格式 ;version 设 
置 输出 格式 的 W3C 版 本 号 〈 仅 在 method="html" 或 method="xml" 时 使 用 ) ;encoding 设置 
输出 中 编码 属性 的 值 (对 于 HTML 将 会 输出 成 charset 的 值 ); doctype-public 规 定 DTD 中 要 使 用 
的 公共 标识 符 ; doctype-system 规 定 DTD 中 要 使 用 的 系统 标识 符 ; indent 规定 在 输出 结果 树 时 
是 否 要 增加 空白 ,该 值 必 须 为 yes 或 no。 


template 模版 


可 以 用 template 来 定义 模版 .template 元 素 必须 有 match 或 hame 两 个 属性 之 一 或 两 者 都 

有 ,match 属 性 用 以 并 联 XML 中 的 元 素 ,其 值 为 一 个 XPath 表 达 式 ,XPath 表 达 式 所 选取 的 元 素 会 
被 应 用 模版 而 进行 转换 . name 属 性 为 模版 定义 名 称 ,用 以 在 其 它 地 方 引 用 .一 个 template 元 素 里 
面包 含 的 是 一 些 将 被 输出 的 HTML 或 XML 标 签 . 


<?xml1 version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XsL/Transform"> 
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/> 
<xsl:template match="/bank/p/name"> 
<strong>Name</strong> 
</xsl:template> 
</xsl:stylesheet> 


对 于 使 用 一 个 没有 任何 模版 的 XSLT 的 XML 文 件 ,在 浏览 器 中 显示 时 只 是 简单 的 将 其 中 的 文本 显 
示 出 来 ,应 用 了 上 面 的 XSLT 之 后 , 根 元 素 bank 下 面子 元 素 p 的 子 元 素 name 的 值 都 将 会 显示 成 一 
个 加 粗 的 Namel! 而 其 它 的 则 只 是 普通 的 文本 .但 这 样 并 没有 什么 意义 ,我 们 还 可 以 更 进一步 ,将 被 
XPath 表 达 式 "/bank/p/name" 选 取 的 元 素 的 值 显示 出 来 ------- value-of 元 素 !value-of 元 素 的 select 
属性 是 必须 的 ,属性 值 是 一 个 XPath 表达 式 ,指定 一 个 节点 (如 果 是 多 节点 ,Value-of 中 会 获取 第 一 
个 节点 的 值 ), 然 后 将 其 里 面 的 文本 输出 ! 将 上 面 的 模版 替换 成 下 面 的 ,输出 后 就 会 将 所 有 的 name 
加 粗 | 


注意 ,任何 正文 内 容 的 输出 都 应 该 放 在 template 元 素 里 面 ! 


<xsl:template match="/bank/p/name"> 
<strong><xsl:value-of select="." /></strong> 
</xsl:template> 


注意 上 面 的 value-of 的 select 是 使 用 的 "" ,而 没有 使 用 "/bank/p/name", 因 为 "/bank/p/name" 返 回 
的 是 所 有 的 name 元 素 ,". "表示 模版 当前 应 用 的 那个 元 素 ! 


可 以 定义 多 个 模版 ,如 下 : 


<xsl:template match="/bank/p/name"> 

<strong><xsl:value-of select="." />---</strong> 

</xsl:template> 

<xsl:template match="/bank/p/age"> 
<em><xsl:value-of select="." />---</em> 

</xsl:template> 

<xsl:template match="/bank/p/money"> 
<u><xsl:value-of select="." /></u><hr /> 

</xsl:template> 


当 多 个 模版 的 match 表 达 选 取 节 点 重 司 时 ,后 出 现 的 模版 的 格式 会 覆盖 先 出 现 的 ,可 以 使 用 
template 元 素 的 priority 属 性 对 模版 的 优先 组 进行 编号 ,其 值 是 一 个 数字 , 越 大 优先 级 越 高 ! 


这 样 , 便 给 name,age,money 这 些 元 素 都 进行 了 格式 化 输出 ,但 现在 输出 的 HTML 代 码 顺 序 仍然 
是 按照 在 XML 源 文件 中 出 现 的 顺序 出 现 的 . 当 需 要 对 整个 XML 文档 进行 格式 化 输出 的 时 候 ,可 以 
将 match 属 性 设 为 站 


<xsl:template match="/" /> 


使 用 上 面 的 模版 ,将 会 使 XML 文档 在 浏览 器 中 没有 任何 输出 .可 以 在 应 用 于 根 节 点 的 模版 中 加 上 
HTML 标 签 ,以 输出 完整 的 HTML 文 档 ! 


<xsl:template match="/ "> 


<html> 

<head> 
<title>XSLT</title> 

</head> 

<body> 一 个 HTML 页 面 </body> 

</html> 


</xsl:template> 


这 样 ,即使 定义 了 其 它 模版 ,它们 的 输出 也 不 会 出 现在 浏览 器 中 ,因为 上 面 的 模版 覆盖 了 其 它 应 用 
于 子 节点 的 模版 的 输出 ,要 在 其 中 包含 其 它 模 版 的 内 容 ,可 以 使 用 XSLT 的 apply-templates 元 素 
来 应 用 模版 ,该 元 素 有 两 个 属性 ,select 属 性 值 是 一 个 XPath 表 达 式 ,XPath 表 达 式 选取 的 节点 及 其 
子 节点 将 被 应 用 模版 . 如 果 没 有 为 这 些 节点 定义 模版 , 则 直接 输出 节点 的 值 .如 果 apply- 
templates 元 素 不 指定 select 属 性 , 则 将 给 当前 节点 (template 元 素 的 match 属 性 所 匹配 的 节点 ) 的 
所 有 后 代 节 点 应 用 模版 ,如 果 没 有 定义 模版 , 则 直接 输出 所 有 节点 的 值 . 


下 面 的 代码 将 直接 输出 所 有 节点 的 值 
XSLT 中 有 一 个 规定 :如 果 一 个 节点 没有 任何 可 用 的 template, 则 将 这 个 节点 中 所 有 文本 节点 的 


值 返 回 ! 


<xsl:template match="/ "> 
<xsl:apply-templates /> 
</xsl:template> 


可 以 指定 select 属 性 ,指明 哪些 节点 将 应 用 模版 并 输出 在 这 个 地 方 ,这 样 就 可 以 不 以 XML 源 文件 
中 的 顺序 输出 数据 了 ! 


<xsl:template match="/ "> 
<xsl:apply-templates select="/bank/p/money" /> 
<hr /> 
<xsl:apply-templates select="/bank/p/name" /> 
</xsl:template> 


还 可 以 使 用 call-template 调 用 指定 的 模版 ,call-template 元 素 的 name 属 性 指定 要 调用 模版 的 
name 


attribute 给 元 素 添 加 属性 


使 用 attribute 元 素 ,可 以 在 转换 时 给 元 素 动态 添加 属性 ! 其 语法 很 简单 ,下 面 是 一 个 给 img 元 素 添 
加 值 为 "test.jpg" 的 src 属 性 的 代码 : 


<img> 
<xsl:attribute name="source">test.jpg</xsl:attribute> 
</img> 


for-each 节点 遍历 


XSLT 中 的 for-each 元 素 允 许 您 在 XSLT 中 进行 循环 。 该 元 素 的 select 属 性 与 其 它 元 素 的 select 
属性 一 样 ,其 值 是 一 个 XPath 表达 式 , 被 XPath 表达 式 选 取 的 元 素 将 被 遍历 ! 


<xsl:template match="/ "> 
<xsl:for-each select="/bank/p/name"> 
<em><xsl:value-of select="." /></em><br /> 
</xsl:for-each> 
</xsl:template> 


上 面 的 代码 将 遍历 所 有 根 元 素 bank 的 子 元 素 p 的 name 子 元 素 并 加 以 格式 化 后 输出 它 的 值 . 注 
意 ,Value-of 元 素 的 select 的 值 "." 表 示 选 取 当 前 节点 ,在 for-each 的 内 部 ,当前 节点 为 for-each 当 前 
遍历 到 的 节点 ! 


sort 排序 


sort 元 素 用 于 对 结果 进行 排序 。sort 元 素 需 要 放 在 for-each 元 素 内 部 .sort 元 素 的 Select 属性 值 为 
选取 排序 依据 节点 的 XPath 表达 式 data type 属性 有 两 个 取 值 (textlInumber), 指 明 是 按 字母 顺序 
排序 还 是 按 数字 大 小 排序 ! 另外 , 它 还 有 个 order 属 性 ,可 以 指定 是 按 正 顺 还 是 倒序 排序 , 取 值 为 
(ascendingldescending), 默 认 是 ascending( 正 序 )! 


<xsl:for-each select="/bank/p"> 
<xsl:sort select="./money" data-type="number" /> 
<xsl:value-of select="./money" /><br /> 
</xsl:for-each> 


if 条 件 测 试 


在 XSLT 中 还 可 以 使 用 if 元 素 进行 条 件 判 断 ,该 元 素 的 test 属 性 值 为 一 个 条 件 测 试 XPath 表达 式 , 当 
值 计 算 结 果 是 趴 的 时 候 才 处 理 if 元 素 中 的 内 容 ! 


<xsl:for-each select="/bank/p"> 
<xsl:sort select="./money" data-type="number" order="descending" /> 
<xsl:if test="position() &lt; 4 and age &gt;=18"> 
<xsl:value-of select="./money" /><br /> 
</xsl:if> 
</xsl:for-each> 


上 面 的 代码 用 以 输出 money 排 前 三 名 的 成 年 人 . 注意 ,在 if 元 素 的 test 属 性 中 ,XPath 表达 中 的 一 
些 特殊 字符 (如 大 于 和 小 于 ) 必 须 写成 实体 引用 1 


choose when...otherwise...... 多 重 条 件 测试 


出 于 习惯 , 见 到 if 语 名 可 能 会 想到 if...else 语 名 ,但 XSLT 中 并 没有 if..else 语 名 ,取而代之 的 是 即 有 
if...else 功 能 ,又 有 switch..case 功 能 的 choose 元 素 ,choose 元 素 有 两 个 子 元 素 when 与 otherwise， 
相当 于 else if 与 else ,或 者 , when 相当 于 case 语 名 ,otherwise 相 当 于 default.when 元 素 的 test 属 
性 值 同 样 是 一 个 XPath 表 达 式 , 当 这 个 表达 式 返 回 丨 的 时 候 ,Wwhen 的 子 元 素 才 会 显示 lotherwise 
没有 test 属 性 , 当 所 有 的 when 元 素 的 test 都 失败 后 ,处 理 otherwise 子 元 素 ! 


<xsl:choose> 
<xsl:when test="name='PHPer'">PHPer 就 是 PHP 程 序 员 的 意思 !</xsl:when> 
<xsl:when test="name='CJ'"> 好 好 Coding, 天 天 向 上 !</xsl:when> 
<xsl:when test="name='DBD' "> 不 懂 1</xsl:when> 
<xsl:otherwise> 其 它 人 </xsl:otherwise> 
</xsl:choose> 


浏览 矣 中 的 XSLT 


只 要 有 XML 与 XSLT 解 释 引 擎 ,就 可 以 在 任何 地 方 使 用 任何 语言 利用 XSLT 将 XML 转换 成 HTML 
或 其 它 文档 ,并 且 使 用 不 同 的 语言 并 不 会 影响 转换 结果 .也 就 是 说 ,这 种 转换 是 与 语言 无 关 的 , 既 
可 以 在 服务 器 端 进 行 转 换 后 ,返回 HTML 页 面 ,也 可 以 客户 端 进行 转换 ,它们 的 效果 都 是 一 样 的 .而 
且 在 客户 端 对 XML 文件 进行 转换 ,可 以 减轻 服务 器 的 负担 ， 


在 一 个 引入 了 XSLT 文 件 的 XML 文件 ,浏览 器 会 自动 对 其 进行 转换 .但 是 ,XML 一 般 并 不 是 在 浏览 
器 中 显示 ,而 是 用 来 读 取 数 据 . 当 使 用 其 它 语言 来 手动 转换 时 ,需要 将 xml-stylesheet 这 样 的 PI 去 
掉 ,这 样 ,XML 文件 可 使 用 多 个 不 同 的 XSL 样式 表 来 进行 转换 ,增加 了 灵活 性 。 


IE 中 的 XSLT 


与 IE 支持 XML DOM 一 样 ,IE 中 XSLT 相 关 API 显 得 十 分 简单 ,同时 IE 对 XSLT 的 支持 也 很 有 限 ! 下 
面 是 在 IE 中 将 一 个 XMLDOM 使 用 XSLT 转 换 成 HTML 的 示例 : 


// 载 入 XML 数据 文件 


Var 


xml. 
xml. 


Var 


XS] 
XS 


xml = new ActiveXObject("Microsoft .XMLDOM"); 

async = false; 

load("test.xml"); // 载 入 XSLT 文 件 , XSLT 也 是 作为 XML 文件 载 入 的 

xsl = new ActiveXxobject("Microsoft ,XMLDOM" ) ， 

async = false; 

load("test.xsl"); // 直 接 在 要 转换 的 DOM 上 调用 transformNode 方 法 , 传 入 XSLT DOM, 返回 字符 串 


document .write(xml.transformNode(xs1)); 


Mozilla 中 的 XSLT 


与 Mozilla 对 XML DOM 的 支持 一 样 , 它 对 XSLT 的 支持 更 标准 但 更 复杂 1Mozilla 使 用 一 个 
XSLTProcessor 对 象 来 处 理 与 XSLT 有 关 的 转换 . 


// 载 入 XML 数据 


Var 


xml. 
xml. 


Var 


XS 
XS 


Var 


xml = document.implementation.createDocument("","",null); 
async =false; 

load("test.xml"); // 载 入 XSLT 

xsl = document.implementation.createDocument("","",null); 
async =false; 

load("test.xsl"); // 创 建 XSLTProcessor 

xslPro = new XSLTProcessor(); 


xslPro.importStylesheet(xsl);// 导 入 XSLT 
// 使 用 transformToDocument 将 XML 按 XSLT 进 行 转换 ,返回 新 文档 的 DOM 


Var 
Var 


result = xslPro.transformToDocument (xml); // 要 将 返回 的 DOM 转 换 成 字符 串 ， 还 要 使 用 XMLSeria 
serializer =new XMLSerializer(); var html = serializer.serializeToString(result); 


document .write(html); 
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第 一 章 如 何 加 载运 行 已 发 布 的 PHP 项 目 


一 .安装 AppServ2.5.10 


小 
Sk 
出 


参考 安装 文档 
验证 是 否 安装 成 功 
Http://localhost:8090/index.php 
http://localhost:8090/phpinfo.php 
http://localhost:8090/phpmyadmin 
username: root password:root 
下 载 项 目 
到 http://www.comsenz.com 下 载 免 费 开 源 项 目 Discuz 7.2_FULL_SC_GBK.zip 
a. 把 解压 后 的 目录 中 的 upload 文件 拷贝 到 D:\AppServ\Wwww， 并 改名 为 discuz 
b. 登 录 到 http://localhost:8090/discuz/install， 按 操作 步骤 安装 ， 设 置 管理 员 为 
username: admin password: admin888 
安装 完成 即 可 使 用 。 
c. 输 入 http://localhost:8090/discuz， 选 择 默 认 版 块 。 


看 到 下 面 的 页 面 ， 说 明 安 装 成 功 。 
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三 .到 http://www.ecshop.com 下 载 ECShop_V2.7.2_UTF8_Release0604.zip 
a. 把 解压 后 的 目录 中 的 Upload 文件 拷贝 到 D:\AppServ\www， 并 改名 为 ecshop. 
b. 登 录 到 http:Wlocalhost:8090/ecshop， 按 操作 步骤 安装 ， 设 置 管理 员 为 
username: admin password: admin888 

安装 完成 即 可 使 用 。 


c. 输 入 http:Wlocalhost:8090/ecshop， 看 到 如 下 页 面 ， 即 安装 成 功 。 
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四 .生成 一 个 自己 的 项 目 

打开 zend studio 7.2, 选 择 工作 目录 为 : D:VAppServwww 
新 建 一 个 PHP project ， 命 名 为 Basic1 

新 建 一 个 PHP File， 命 名 为 : demo1.php 


输入 如 下 内 容 : 


<?php 
echo 'Hello World'; 


?> 


打开 浏览 器 ， 输 入 http://localhost:8090/Basic1/ 


可 看 到 如 下 内 容 
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Index of /Basic1 

Name Last modified Size Description 
Parent Directory 

demo1.php 13-Dec-2011 00:33 31 
orderform.php 13-Dec-2011 00:16 871 
postorder.php 14-Dec-2011 22:29 1.1K 


Apache/2.2.8 (Win32) PHP/5.2.6 Server at localhost Port 8090 


点 击 demo1.php， 可 看 到 输出 了 Hello World. 
五 . 运行 已 有 php 文 件 


Orderform.php 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 我 的 第 一 个 PHP 程 序 </title> 
<style> 
table { 
background:#ccc; 
width:200px; 
margin:20px auto; 
} 
table td { 
background:#fff; 
} 
</style> 
</head> 


<body> 


<form method="post" action="postorder.php"> 

<table> 
<tr><td> 您 的 商品 </td><td> 价 格 </td><td> 数 量 </td></tr> 
<tr><td> 苹 果 </td><td>2.6 元 / 斤 </td><td><input type="text" size="5" name="apple" /></. 
<tr><td> 猪 肉 </td><td>13 .2 元 / 斤 </td><td><input type="text" size="5" name="pig" /></t 
<tr><td> 人 饼干 </td><td>21 元 / 盒 </td><td><input type="text" size="5" name="biscuit" />< 
<tr><td colspan="3" align="center"><input type="submit" value=" 发 送 订单 " /></td></t 

</table> 


</form> 


</body> 


</html> 
Eee 


Postorderphp 





<?php 
$apple=$HTTP_POST_VARS[ 'apple']， 
$pig=$HTTP_POST_VARS[ 'pig']; 


$biscuit=$HTTP_POST_VARS['biscuit']; 


$apple=$apple*2.6; 
$pig=$pig*13.2; 


$biscuit=$biscuit*21; 


$sum=$apple+$pig+$biscuit; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN™" "http://www.w3.org/TR/x 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 我 的 第 一 个 PHP 程 序 </title> 
<style> 
table { 
background:#ccc; 
width:200px; 
margin:20px auto; 
} 
table td { 
background:#fff; 
} 
</style> 
</head> 


<body> 


<form method="post" action="postorder.php"> 
<table> 
<tr><td> 您 的 商品 </td><td> 价 格 </td><td> 小 记 </td></tr> 
<tr><td> 苹 果 </td><td>2.6 元 / 斤 </td><td><?echo $apple ?></td></tr> 
<tr><td> 猪 肉 </td><td>13 .2 元 / 斤 </td><td><?echo $pig ?></td></tr> 
<tr><td> 人 饼干 </td><td>21 元 /人 金 </td><td><?echo $biscuit ?></td></tr> 
<tr><td colspan="3" align="center"> 一 共 要 支付 <?echo $sum ?> 元 [<a href="orderform.ph 
</table> 


</form> 


</body> 


</html> 





加 [Eee 





输入 url : http://localhost:8090/Basic1/ 


看 到 如 下 页 面 


Index of /Basic1 

Name Last modified Size Description 
Parent Directory 

demo1.php 13-Dec-2011 00:33 31 
orderform.php 13-Dec-2011 00:16 871 
postorder .php 14-Dec-2011 22:29 1.1K 


Apache/2.2.8 (Win32) PHP/5.2.6 Server at localhost Port 8090 


点 击 orderform.php+ 
您 的 商品 价格 数量 
苹果 2. 6 元 / 斤 
猪肉 1 元 万 
饼干 21 元 / 盒 


| 发 送 订单 | 


分 别 在 数量 一 栏 输 入 2， 点 击 上 发 送 订单 ， 看 到 如 下 页 面 " 





您 的 商品 价格 小 记 
苹果 i 
猪肉 13. 2 元 / 拷 26.4 
饼干 21 元 / 盒 42 
和 [返回 修 


第 二 章 PHP 基 础 


一 .在 Web 页 面 襄 入 PHP 代 码 的 几 种 风格 


推荐 使 用 标准 风格 或 简短 风格 


<?php 
// 标 准 风 格 
echo 'Hello World!'; 


2> 


<? 
// 简 短 风 格 
echo 'Hello World!'; 


2> 


<script language="php"> 
//script 风 格 
echo 'Hello World!'; 


</script> 


二 .代码 注释 的 四 种 方式 


<?php 


// 单 行 注释 


2 


* 多 行 注释 


#Shell 风 格 注释 


Fe * 
* PHPdoc 风 格 注释 
wh 


?> 
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三 .向 浏览 器 输出 字符 串 的 几 种 方法 
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<?php 
* echo 有 函数 的 功能 : 向 浏览 器 输出 字符 串 
* 郊 数 返回 值 : void 
4 
echo 'echo function!'; 


echo('<br/>'); 


/* 
* echo 郊 数 的 功能 : 向 浏览 器 输出 字符 串 

* 六 数 返回 值 : int 

B34 

print "print function'; 

echo('<br/>'); 

echo print 'echo value of print function. 


echo('<br/>'); 


区 
* printf 函 数 的 功能 : 向 浏览 器 输出 字符 串 


* 函数 返回 值 : 所 打印 字符 串 的 长 


入 


2 

printf("a weekend have %d days",7); 
echo('<br/>'); 

echo printf("a weekend have %d days",7); 


echo('<br/>'); 


/* 
* Sprintf 函 数 的 功能 : 把 字符 囊 保存 到 内 存 中 
* 函数 返回 值 : 保存 的 字符 串 本 身 

Sprintf( "Sprintf function'); 

echo('<br/>'); 

echo sprintf('sprintf function'); 

echo('<br/>'); 


?> 


echo function test! 

print function test. 
print function test. 1 

a weekend have 7 days 

a weekend have 7 days. 23 


sprintf function test 


类 型 描述 
%b 整数 ， 显 示 为 二 进 制 
%c 整数 ， 显 示 为 ASCII 字 符 
%d 整数 ， 显 示 为 有 符号 十 进 
%f 浮 点 数 ， 显 示 为 浮 点 数 
%o 整数 ， 显 示 为 八进制 数 
%s 字符 串 ， 显 示 为 字符 串 
%u 整数 ， 显 示 为 无 符号 十 进 制 数 
%x 整数 ， 显 示 为 小 写 的 十 六 进 制 数 
%X 整数 ， 显 示 为 大 写 的 十 六 进 制 数 


四 .标识 符 与 变量 

1. 标 识 符 的 基本 规则 : 
1) 标识 符 可 以 是 任意 长 度 ， 而 且 可 以 由 任何 字母 、 数 字 、 下 划 线 组 成 。 
2) 标识 符 不 能 以 数字 开始 。 

3) 在 PHP 中 ， 标 识 符 是 区 分 大 小 写 的 。 


4) 一 个 变量 名 称 可 以 与 一 个 函数 名 称 相 同 。 


<?php 
$sum = 0; 
$total = 1.22; 
$sum = $total; 
echo $sum; //1.22 


?> 


3. 变 量 的 数据 类 型 : 


基本 数据 类 型 
类 型 名 称 
Integer 整数 
Float 单 精度 浮 点 数 
Double 又 精度 浮 点 数 
String 字符 串 
Boolean 布尔 
Array 数组 
Object 对 象 
4. 类 型 强度 
PHP 是 动态 语言 ， 是 一 种 非常 弱 的 类 型 语言 ， 在 程序 运行 时 ， 可 以 动态 的 改变 变量 的 类 型 。 
5. 类 型 转换 : 
隐 式 类 型 转换 : 
<?php 
$sum = 0; 


$total = 1.22; 
$sum = $total; 
echo gettype ( $sum );//double 


2> 


显 式 类 型 转换 : 


<?php 

$sum = 100; 

$total = ( string ) $sum; 

echo gettype ( $sum );//string 


2> 


使 用 settype() 有 函数 进行 类 型 转换 ， 返 回 值 1 表 示 成 功 ， 空 表示 失败 。 


<?php 

$sum = 58 

echo settype ( $sum, "float" ); 
echo $sum; //58 

echo gettype ( $sum ); //double 


?> 


.检测 变量 的 函数 : 


Gettype() 获取 变量 的 类 型 
Settype() 设置 变量 的 类 型 
lsset() 用 来 判断 一 个 变量 是 否 存在 
Unset() 释放 给 定 的 变量 
Empty() 检测 一 个 变量 的 值 是 否 为 空 


is_int() is_integer() 





ls_string() 检测 变量 是 否 是 字符 串 

ls_numeric 检测 变量 是 否 为 数字 或 数字 

ls_null 检测 变量 是 否 为 NULL 

Intval() 获取 变量 的 整数 值 
lsset() 的 基本 使 用 

<?php 

$a = 10; 


echo isset ( $a );//1 


?> 


<?php 
echo isset ( $b );//’’ 


?> 


Usset() 的 基本 使 用 


符 串 


返回 值 

基本 数据 类 型 中 的 其 中 一 种 
Bool(1:true 0:false(or ”)) 
Bool 

Void 

Bool 

Bool 

bool 

bool 

bool 


int 


<?php 


$a = 10; 


unset ($a); 


echo isset ( $a );//”’ 


2> 


Empty() 的 基本 使 用 


$d 二 i 


$e = array(); 


$f = null; 
$g 二 Os 
$h = false; 


echo empty($a);//''(false) 
echo '<br/>'; 

echo empty($b);//''(false) 
echo '<br/>'; 

echo empty($c);//1(true) 
echo '<br/>'; 

echo empty($d);//1(true) 
echo '<br/>'; 

echo empty($e);//1(true) 
echo '<br/>'; 

echo empty($f);//1(true) 
echo '<br/>'; 

echo empty($9);//1(true) 
echo '<br/>'; 

echo empty($h);//1(true) 
echo '<br/>'; 


echo empty($f);//1(true) 


is_int() 的 基本 使 用 。 类 似 的 函数 有 :is float()、is_double()、is_string()、is_bool()、 
is_array() ~ is_null() ~ is_long() ~ is_object() ~ is_resource() 、is_numeric()、is_real() 等 。 


Tar 

$b = 1.23; 

$c = 3.1415926; 
$d = "hello"; 
$e = false; 

$f = array(); 


$g = null; 


echo is_int($a);//1 
echo '<br/>'; 

echo is_float($b);//1 
echo '<br/>'; 

echo is_double($c);//1 
echo '<br/>'; 

echo is_ string($d);//1 
echo '<br/>'; 

echo is_bool($e);//1 
echo '<br/>'; 

echo is_array($f);//1 
echo '<br/>'; 

echo is_null($9);//1 
echo '<br/>'; 


echo is_numeric($a);//1 


Intval() 函 数 的 基本 使 用 。 类 似 的 函数 为 : floatval()、strval() 


<?php 


$a = 22.23; 


echo gettype($a);//double 


echo '<br/>'; 


$b = intval($a);// 类 型 转换 后 不 改变 $a 原来 的 类 型 


echo gettype($a);//double 


echo '<br/>'; 


?> 


<?php 


$a = 22.23; 


echo gettype($a);//double 


echo '<br/>'; 


settype($a, "integer");// 类 型 转换 后 会 改变 $aa 原 来 的 类 型 


echo gettype($a);//integer 


echo '<br/>'; 


?> 


7. 变 量 的 作用 域 
超级 全 局 变量 
变量 名 
$GLOBALS 
$_SERVER 
$_GET 
$_POST 
$_COOKIE 
$_FILES 
$_ENV 
$ REQUEST 
$_SESSION 


作用 
所 有 全 局 变量 数组 
服务 器 环境 变量 数组 
通过 GET 方 式 传递 给 该 脚本 的 变量 数组 
通过 POST 方式 传递 给 该 脚本 的 变量 数组 
COOKIE 变 量 数组 
与 文件 上 传 相 关 的 变量 数组 
环境 变量 数组 
所 用 用 户 输入 的 变量 数组 


会 话 变量 数组 


一 旦 被 定义 之 后 ， 就 不 能 再 次 更 改 。 


<?php 
define("TOTAL",100); 
echo TOTAL;//100 


echo '<br/>'; 


define("TOTAL", 200); 
echo TOTAL;//100 


?> 


查看 PHP 预 定义 的 常量 的 方法 


<?php 
phpinfo( ); 


?> 


引用 PHP 预 定义 常量 的 方法 


<?php 

echo $ SERVER["SERVER_ NAME"];//localhost 

echo '<br/>'; 

echo $_ SERVER["SERVER_PORT"];//8090 

echo '<br/>'; 

echo $ SERVER["DOCUMENT_ ROOT"];//D:/AppServ/www 
echo '<br/>'; 


?> 


五 .访问 表单 变量 


常见 的 三 种 方式 


<?php 

echo $username;// 简 短 风格 ， 容 易 与 变量 名 混淆 ， 不 推荐 使 用 。 

echo '<br/>'; 

echo $_POST['username'];// 中 等 风格 ，4.1.0 版 后 支持 ， 推 荐 

echo '<br/>'; 

echo $HTTP_POST_VARS['username'];// 兄 长 风格 ， 已 过 时 ， 将 来 可 能 会 被 别 除 


?> 


Posttest.html 


<!DOCTYPE htm] PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN™" "http://www.w3.org/TR/html 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title> 获 取 表 单数 据 的 方式 </title> 
</head> 
<body> 
<form method="POST" action="demo10.php"> 
username:<input type="text" name="username" /> 
<input type="submit" value="submit" /> 
</form> 
</body> 


</html> 


的 EEC 





六 .字符 串 连 接 用 . 


<?php 

echo "the student name is :".$ POST['username']; 
echo "<br/>"，; 

echo "welcome to "."school"; 


?> 


第 三 章 操作 符 与 控制 结构 


一 . 字符 串 插入 
双 引 号 与 单 引号 的 区 别 : 


1. 双 引号 的 使 用 : 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<?php 

// 双 引号 可 以 解析 变量 和 转 义 字符 

$username = "jack"; 

echo "his name is $username!"; 


echo "<br/>"; 


$username = "小 东 "， 

// 如 果 是 英文 的 感叹 号 会 正常 解析 变量 

echo "他 的 名 字 是 $username!";// 他 的 名 字 是 小 东 ! 
echo "<br/>"; 

// 如 果 是 中 文 的 感叹 号 则 会 解析 不 出 来 

echo "他 的 名 字 是 $username !";// 他 的 名 字 是 


echo "<br/>"; 


// 转 义 字 符 在 这 里 虽然 被 解析 出 来 了 ， 但 是 \n 是 在 源 代码 里 换行 
// 浏 览 器 显示 只 是 一 个 字符 的 位 置 
echo "他 的 名 字 是 $username, \n 他 今年 20 岁 了 ";// 他 的 名 字 是 小 东 ， 他 今年 20 岁 了 


echo "<br/>"; 


// 为 了 避免 出 现 错误 ， 推 荐 使 用 字符 串 连 接 的 方式 
echo "他 的 名 字 是 " .$username.,", 他 今年 20 岁 了 ";// 他 的 名 字 是 小 东 , 他 今年 20 岁 了 


?> 


2. 单 引号 的 使 用 : 


<?php 

// 单 引号 只 是 输出 字符 串 字 面值 ， 

// 不 会 解析 变量 和 转 义 字符 。 

// 也 不 会 进行 语法 加 亮 提 示 

$username = 'anllin'; 

echo 'his name is $username,\n his age is 20.'， 
//output 

//his name is $username,\n his age is 20， 


?> 


部 分 常用 的 转 义 字符 


转 义 序列 描述 
\n 换行 符 
\r 回 车 
At 水 平 制 表 图 
\ 反 斜 杠 
$ 美元 符 
Wy | 
二 操作 符 

<?php 

// 算 术 操 作 符 

$a = 5; 

$b = 3; 


echo $a + $b; 
echo '<br/>'，; 
echo $a - $b; 
echo '<br/>'，; 
echo $a * $b; 
echo '<br/>'，; 
echo $a / $b; 
echo '<br/>'，; 
echo $a % $b; 


?> 


8 


2 

15 

1 .66666666667 

2 

<?php 
// 复 合 赋值 操作 符 
$a = oD. 
$b = 3; 
echo $a += $b; 
echo '<br/>'，; 
echo $a -= $b; 
echo '<br/>'，; 
echo $a *= $b; 
echo '<br/>'，; 
echo $a /= $b; 
echo '<br/>'，; 
echo $a %= $b; 
echo '<br/>'，; 
echo $a .= $b; 

?> 

8 

5 

15 

5 

2 

23 

<?php 
// 递 增 递减 运算 符 
as =S 


echo '<br/>'; 


echo $a--， 


?> 

6 

6 

6 

6 

<?php 

a = 
$b = 3; 
PC = 5 
$d = Ws 
echo $a == $c; 


echo '<br/>'; 
echo $a === $c; 
echo '<br/>'; 
echo $a == $d; 
echo '<br/>'; 
echo $a != $b; 
echo '<br/>'; 
echo $a !== $d; 
echo '<br/>'; 
echo $a != $b; 
echo '<br/>'; 
echo $a > $b; 
echo '<br/>'; 
echo $b < $c; 
echo '<br/>'; 
echo $a >= $c; 
echo '<br/>'; 


echo $a <= $c; 


EV 


B24 
7 
1 
ol 


$C = 3 

echo $b > 0 && $c > 0; 
echo '<br/>'; 

echo $b > 0 and $c > 0; 


echo '<br/>'; 


echo $b !=0 || $c != 0; 
echo '<br/>'; 
echo $b != 0 or $c != 0; 


echo '<br/>'; 


ERE 


三 元 操作 符 
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<?php 

$a = 100; 

echo $a > 60 ? 'success':'fail'; 
?> 


success 
错误 抑制 操作 符 


<?php 
echo @(100/0); 


?> 


返回 一 个 包含 了 
素 的 数组 
如 果 S$a 和 S$b 具有 
true 





如 果 Sa 和 Sb 具有 

true 
一 
本 二 本 本 
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<meta http-equiv="content-type" content="text/html;charset=utf-8"/> 


<?php 


$a = 10) 
if ($a > 0) 
{ 
echo ' 整 数 大 于 零 '， 


} 


echo '<br/>'; 


if ($a > 0) 
{ 
echo ' 整 数 大 于 零 '， 
} 
else if($a < 0) 
{ 
echo ' 整 数 小 于 零 '， 
} 
else 
{ 
echo ' 整 数 等 于 零 '， 
} 
?> 


Switch 语 尹 


<meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
<?php 


$role = 'admin'; 


Switch ($role) 
{ 
case 'admin' 
echo ' 管 理 员 '， 
break; 
case 'User! 
echo ' 普 通用 户 '， 
break; 
case 'guest' 
echo ' 游 客 '， 
break; 
default 
echo ' 游 客 '， 


break; 


?> 


While 循 环 语句 


<?php 


while ( $a >0) 


{ 
echo $a --; 
echo "<br> ' ， 
?> 


Do while 循环 语句 


echo $a --; 
echo '<br/>'，; 
} 
while ( $a >0) 


?> 


For 循 环 语句 


<?php 


for($a = 0; $a < 10; $a++) 


{ 
echo $a; 
echo '<br/>'; 
} 
?> 
Break 语 多 


<meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
<?php 


for($a = 0; $a < 10; $a++) 


{ 
echo $a; 
echo '<br/>'，; 
if($a ==5) 
{ 
break;// 终 止 循环 ， 但 执行 循环 后 面 的 语句 
} 
} 


echo “' 循 环 结束 ! 


?> 


Exit 语 名 


<?php 


for($a = 0; $a < 10; $a++) 


{ 
echo $a; 
echo '<br/>'，; 
if($a ==5) 
{ 
exit;// 直 接 退 出 ， 循 环 后 面 的 语句 不 执行 
} 
} 


echo ' 循 环 结 束 '， 


?> 


Continue 语 句 


<?php 


for($a = 0; $a < 10; $a++) 


{ 
echo $a; 
echo '<br/>'，; 
if($a ==5) 
{ 
continue;// 结 束 本 次 循环 ， 继 续 下 次 循环 ， 循 环 后 面 的 语句 依然 执行 
} 
} 


echo ' 循 环 结束 ! ， 


?> 


章 数学 运 背 


一 .数值 数据 类 型 
数字 或 数值 数据 在 PHP 中 一 般 就 两 种 double 和 int 。 


PHP 是 一 种 松散 类 型 的 脚本 语言 ， 要 注意 类 型 转换 的 方式 。 


<?php 


// 数 字 的 字符 串 也 是 数字 ， 参 与 数学 运算 当 数 字 处 理 
echo is_numeric ( $a ); //1 

echo '<br/>'; 

echo 7 + $a; //12 

echo '<br/>'; 

echo '7' + $a; //12 

echo '<br/>'; 

// 用 ,连接 后 就 按 字 符 串 处 理 

echo '7' . $a; //75 


?> 


二 .随机 数 
Rand() 有 函数 是 libc 中 定义 的 一 个 随机 函数 的 简单 包装 器 。 


Mt_rand() 函 数 是 一 个 很 好 的 代替 实现 。 


$a = rand(0,10); 
echo $a; 

echo '<br/>'; 

echo getrandmax(); 


echo '<br/>'; 


$b = mt_rand(9, 10); 
echo $b; 

echo '<br/>'; 

echo mt_getrandmax(); 


echo '<br/>'; 


output 


1 

32767 

6 
2147483647 


三 .格式 化 数据 


<?php 

$a = 12345.6789; 

// 用 于 设置 保留 多 少 位 小 数 点 

echo number_format ($a,2); 

echo '<br/>'; 

// 也 可 以 改变 默认 小 数 点 的 符号 表示 和 千 分 位 的 表示 符号 
echo number_format($a,2,'#','*') 


?> 


Output 


12,345.68 
12*345#68 


$a = -123456.789 
$bEE anray (G1 2 20740 
echo abs ( $a ); 
echo '<br/>'; 

echo floor ( $a ); 
echo '<br>'; 

echo ceil ( $a ); 
echo '<br>'; 

echo round ( $a ); 
echo '<br>'; 

echo min ( $b ); 
echo '<br>'; 


echo max ( $b ); 


output 


123456.789 
-123457 
-123456 
-123457 

a 
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取 绝 对 值 
全 去 法 取 整 
进 一 法 取 整 
四 使 五 入 
求 最 小 值 或 数组 中 最 小 值 
求 最 大 值 或 数组 中 最 大 值 


第 五 章 数组 


一 :什么 是 数组 
数组 是 一 组 有 某 种 共同 特性 的 元 素 ， 包 括 相 似 性 和 类 型 。 
每 个 元 素 由 一 个 特殊 的 标识 符 来 区 分 ， 称 之 为 key， 而 每 个 key 都 有 一 个 value 
1. 创 建 数 组 的 两 种 方式 : 
1.1 用 array() 部 数 
<?php 
$usernames = array ('Alerk', 'Mary', 'Lucy', 'Bob', 'Jack', 'John', 'Mark' ); 


foreach ( $usernames as $name ) 


{ 


echo $name . '<br/>',; 


1.2 用 range() 遂 数 


<?php 
$numbers = range ( 0, 10 ); 
foreach ( $numbers as $num ) 


{ 


echo $num . '<br/>'; 


$letters= range ( 'a', 'z' ); 
foreach ( $lettersas $letter ) 


{ 


echo $letter . '<br/>'，; 


NE~~X<cC"TrHW“"OoOTO0o3P- 和 HTOhROoOOCOTVPPAOONOOOBBONPoO 


2. 循 环 访问 数组 元 素 的 两 种 方式 : 


2.1 for 循 环 


<?php 

//range 的 第 三 个 参数 表示 步 长 

$numbers = range(1,10,2); 

for($i = 0;$i<count($numbers); $1i ++) 
{ 


echo $numbers[$i].'<br/>'; 


output 


ONOOPp 


2.2 foreach 循 环 


<?php 
$letters = range(' ah' 2)， 
foreach($letters as $letter) 


{ 


echo $letter.'<br/>'，; 


output 


moOnpnm 


Foreach 还 可 以 用 来 输出 数组 的 下 标 和 对 应 的 值 


<?php 
$letters = range('a','g',2); 
foreach($letters as $key => $value) 


{ 


echo $key.'---'.$value.'<br/>'; 
} 
?3 
output 
0---a 
EC 
2---e 
3---g 


3.is_array() 函 数 ， 用 于 变量 判断 是 否 为 一 个 数组 


<?php 
$numbers = range(1,10,2); 


if(is_array($numbers)) 


{ 
foreach($numbers as $num) 
{ 
echo $num.'<br/>'，; 
} 
} 
else 
{ 
echo $numbers; 
} 
2 


4.print_r 函 数 ， 打 印 关于 变量 的 易于 理解 的 信息 


<?php 
$usernames = array ('Jackie', 'Mary', 'Lucy', 'Bob', 'Mark', 'John' ); 
print_r ( $usernames ); 


?> 


output 


Array ( [0] => Jackie [1] => Mary [2] => Lucy [3] => Bob [4] => Mark [5] => John ) 


源 代码 里 可 以 看 到 显示 为 : 


Array 

( 
[0] => Jackie 
[1] => Mary 
[2] => Lucy 
[3] => Bob 
[4] => Mark 
[5] => John 


二 ' 自 定义 键 数组 


1. 如 果 不 想 创建 默认 下 标 为 零 的 数组 ， 可 以 用 如 下 方法 ， 创 建 键 为 字符 串 的 数组 


<?php 
// 初 始 化 数组 


$userages = array('Jack'=> 23,'Lucy'=>25, 'Mark'=>28); 


// 访 问 数组 各 元 素 
echo $userages['Jack'].'<br/>'; 
echo $userages['Lucy'].'<br/>'; 


echo $userages['Mark'].'<br/>'; 


?> 


2. 往 自 定 义 键 数 组 里 追加 元 素 


<?php 

// 初 始 化 数组 

$ages = array('Jack'=>23); 
// 追 加 元 素 

$ages[ 'Lucy ']=25 


$ages['Mark']=28; 


foreach($ages as $key => $value) 


{ 


echo $key.'----'.$value.'<br/>',; 


?> 


3. 直 接 添加 元 素 ， 无 需 创 建 数组 。 


<?php 

// 不 创建 数组 直接 添加 
$ages['Jack']=23; 
$ages['Lucy']=25; 
$ages['Mark']=28; 

foreach($ages as $key => $value) 


{ 


echo $key.'----'.$value.'<br/>'; 


?> 


4. 循 环 打 印 数 组 foreach 的 使 用 


<?php 
$ages[ 'Jack ' ]=23 
$ages['Lucy']=25; 


$ages['Mark']=28; 


foreach($ages as $key => $value) 


{ 


echo $key.'=>"'.$value.'<br/>'; 


?> 


5. each() -- 返回 数组 中 当前 的 键 值 对 并 将 数组 指针 向 前 移动 一 步 


<?php 
$ages['Jack']=23; 
$ages['Lucy']=25; 


$ages['Mark']=28; 


$a = each($ages); 
print_r($a); 

echo '<br/>'; 

$a = each($ages); 
print_r($a); 

echo '<br/>'; 

$a = each($ages ) ; 
print_r($a) 


?> 


用 each() 有 函数 做 循环 打印 


<?php 
$ages[ 'Jack ' ]=23 
$ages['Lucy']=25; 


$ages['Mark']=28; 


while(!! $element = each($ages)) 


{ 
print_r($element); 


echo '<br>'; 
?> 
另 一 种 打印 方式 
<?php 
$ages[ 'Jack ' ]=23 
$ages[ 'Lucy ']=25 


$ages['Mark']=28; 


while(!! $element = each($ages)) 


{ 
echo $element['key'].'=>'.$element['value']; 
echo '<br>'; 

} 

?> 


6list() 函 数 的 使 用 -把 数组 中 的 值 赋 给 一 些 变量 


<?php 
$ages[ 'Jack ' ]=23 
$ages['Lucy']=25; 


$ages['Mark']=28; 


list($name, $age)= each($ages ) ; 
echo $name. '=>' .$age 


?> 


用 list 循 环 打 印 结果 


<?php 
$ages['Jack']=23; 
$ages['Lucy']=25; 


$ages['Mark']=28; 
while(!!list($name,$age)= each($ages)) 
{ 

echo $name.'=>'.$age.'<br>'; 
?> 


output 


Jack=>23 
Lucy=>25 
Mark=>28 


7.reset() 函 数 的 使 用 -- 将 数组 的 内 部 指针 指向 第 一 个 单元 


<?php 
$ages['Jack']=23; 
$ages['Lucy']=25; 


$ages['Mark']=28; 


each ($ages); 

each ($ages); 

list($name, $age)= each($ages); 
echo $name.'=>'.$age.'<br>'; 
// 把 数组 重新 设 定 到 数组 开始 处 
reset ($ages); 

list($name, $age)= each($ages); 
echo $name.'=>'.$age.'<br>'; 


?> 


Output 


Mark=>28 
Jack=>23 


8. array_unique() -- 移 除 数组 中 重复 的 值 


<?php 

$nums = array(1,2,3,4,5,6,5,4,3,2,1,1,2,3,4,5,6); 
// 返 回 一 个 不 包含 重复 值 的 数组 

$result = array_unidque($nums ) ; 

print_r($result); 


?> 


Output 


Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 [5] => 6 ) 


9. array_flip ()-- 交换 数组 中 的 键 和 值 


<?php 


$userages = array('Jack'=> 23,'Lucy'=>25, 'Mark'=>28); 


$ages = array_flip($userages); 


print_r($ages ) ; 


55 


output 


Array ( [23] => Jack [25] => Lucy [28] => Mark ) 


三 .数组 里 的 数组 


数组 里 不 一 定 就 是 一 个 关键 字 和 值 的 列表 ， 数 组 里 也 可 以 放 入 数组 


<?php 

$produces = array( 
array('apple',6,28.8), 
array('pear',3,15.6), 


array('banana',10,4.6) 


echo $produces[0][90].'|'.$produces[0][1].'|'.$produces[0][2].'<br>'; 
echo $produces[1][0].'|"'.$produces[1][1].'|'.$produces[1][2].'<br>"'; 
echo $produces[2][0].'|'.$produces[2][1].'|'.$produces[2][2].'<br>"'; 
?> 

output 


apple|6|28.8 
pear|3|15.6 
banana|10|4.6 


用 for 循 环 打 印 数组 中 的 数组 


<?php 

$produces = array ( 
array ('apple', 6, 28.8 )， 
array ('pear', 3, 15.6 ), 
array ('banana', 10, 4.6 ) 


人 


for($i = 0; $i < count ( $produces ); $i ++) 
{ 


for($j = 0; $j < count ( $produces [$i] ); $j] ++) 


{ 
echo '|' . $produces[$i][$j]; 
} 
echo '<br>'; 
} 
?> 
output 


|apple16128 .8 
lpear|3|15.6 
lbanana|10|4.6 


二 维 数 组 


<?php 


$produces = array ( 


array ('name' => 'apple', "amount' => 6, 'price' => 28.8 )， 


array ('name' => 'pear', 'amount' => 3, 'price' => 15.6 ), 


array ('name' => 'banana', 'amount' => 10, 


Dh 


while(!!List($key,$value)=each($produces)) 


{ 


while(!!list($key2,$value2)=each($value)) 


{ 
echo '|'.$key2.'=>' .$value2; 
} 
echo "<br> ' ， 
?> 
output 


Iname=>apple|amount=>6|price=>28.8 
|name=>pear|amount=>3|price=>15.6 
|Iname=>banana|amount=>10|price=>4.6 


用 foreach 来 打印 则 更 容易 (推荐) 


'price' => 4.6 ) 


<?php 

$produces = array ( 
array ('name' => 'apple', 'amount' => 6, 'price' => 28.8 )， 
array ('name' => 'pear', 'amount' => 3, 'price' => 15.6 ), 
array ('name' => 'banana', 'amount' => 10, 'price' => 4.6 ) 


人 


foreach($produces as $key1 => $valuel) 


{ 
foreach($value1 as $key2 => $value2) 
由 

echo '|'.$key2.'=>' .$value2; 

} 
echo "<br> ' ， 

?> 

output 


Iname=>apple|amount=>6|price=>28.8 
|name=>pear |amount=>3|price=>15.6 
Iname=>banana|amount=>10|price=>4.6 


四 :数组 的 排序 


1.Sort() 函 数 对 英文 的 排序 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruits = array('lemo', 'banana', 'apple', 'pear'); 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

sort($fruits); 

echo ' 排 序 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [0] => lemo [1] => banana [2] => apple [3] => pear ) 
排序 后 的 数组 : Array ( [0] => apple [1] => banana [2] => lemo [3] => pear ) 


2.Sort() 部 数 对 中 文 的 排序 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruits = array(' 柠 榜 '，,' 香 蕉 ',' 苹 果 '，' 梨 子 ')， 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

sort($fruits); 

echo ' 排 序 后 的 数组 :'， 

print_r($fruits); 


?> 


Output: 


原始 的 数组 : Array ( [0] => 柠檬 [1] => 香蕉 [2] => 苹果 [3] => 梨子 ) 
排序 后 的 数组 : Array ( [9] => 柠檬 [1] => 梨子 [2] => 苹果 [3] => 香蕉 ) 


3. asort -- 对 数组 进行 排序 并 保持 索引 关系 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

Sfruits = annay (a TD > 从 人 CU=> 坟 宁 0 二 > 外 地 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

asort($fruits); 

echo ' 排 序 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [a] => 柠檬 [b] => 香蕉 [c] => 苹果 [d] => 梨子 ) 
排序 后 的 数组 : Array ( [a] => 柠檬 [d] => 梨子 [c] => 芋 果 [b] => 香蕉 ) 


4. ksort -- 对 数组 按照 键 名 排序 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

Pinu =Sanmray (b= = => 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

ksort($fruits ) ; 

echo ' 排 序 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [b] => 柠檬 [a] => 香蕉 [d] => 苹果 [c] => 梨子 ) 
排序 后 的 数组 :Array ( [a] => 香蕉 [b] => 柠檬 [c] => 梨子 [d] => 苹果 ) 


5. rsort -- 对 数组 逆向 排序 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruits = array(' 柠 榜 ', ' 香 莅 '，' 苹 果 ',' 巢 子 '); 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

rsort($fruits); 

echo ' 排 序 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [9] => 柠檬 [1] => 香蕉 [2] => 苹果 [3] => 梨子 ) 
排序 后 的 数组 : Array ( [9] => 香蕉 [1] => 革 果 [2] => 梨子 [3] => 柠檬 ) 


6. arsort -- 对 数组 进行 逆向 排序 并 保持 索引 关系 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

下 

echo ' 原 始 的 数组 : ! 

print_r($fruits); 

echo '<br/>'; 

arsort($fruits); 

echo ' 排 序 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [a] => 柠檬 [b] => 香蕉 [c] => 苹果 [d] => 梨子 ) 
排序 后 的 数组 : Array ( [b] => 香蕉 [c] => 苦果 [d] => 梨子 [a] => 柠檬 ) 


7. krsort -- 对 数组 按照 键 名 逆向 排序 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

SEE 人 

echo ' 原 始 的 数组 : ! 

print_r($fruits); 

echo '<br/>'; 

krsort($fruits); 

echo ' 排 序 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [a] => 柠檬 [b] => 香蕉 [c] => 苹果 [d] => 梨子 ) 
排序 后 的 数组 :Array ( [d] => 梨子 [c] => 苦果 [b] => 香蕉 [a] => 柠檬 ) 


8. shuffle -- 将 数组 打 乱 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruitss array('a'=>" 柠 樟 ','b'=>' 香 苍 ',，'C'=>"' 蕴 果 '，"'d"=>' 刘 子 '); 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

shuffle($fruits); 

echo ' 打 乱 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [a] => 柠檬 [b] => 香蕉 [c] => 苹果 [d] => 梨子 ) 
打 乱 后 的 数组 : Array ( [0] => 香蕉 [1] => 苹果 [2] => 柠檬 [3] => 梨子 ) 


9. array_reverse -- 返回 一 个 单元 顺序 相反 的 数组 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

SEE 

echo ' 原 始 的 数组 : ! 

print_r($fruits); 

echo '<br/>'; 

$fruits = array_reverse($fruits ) ; 

echo ' 反 转 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [a] => 柠檬 [b] => 香蕉 [c] => 苹果 [d] => 梨子 ) 
打 乱 后 的 数组 :Array ( [9] => 香蕉 [1] => 苹果 [2] => 柠檬 [3] => 梨子 ) 


10. array_unshift -- 在 数组 开头 插入 一 个 或 多 个 单元 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruits = array('a'=>' 柠 榜 ', 'b'=>' 香 蕉 ', 'c'=>' 苹 果 ','d'=>' 梨子 '); 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

array_unshift($fruits, ' 柿 子 '); 

echo ' 插 入 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [a] => 柠檬 [b] => 香蕉 [c] => 苹果 [d] => 梨子 ) 
插入 后 的 数组 : Array ( [9] => 柿子 [a] => 柠 榜 [b] => 香蕉 [c] => 症 果 [d] => 如 子 ) 


11. array_shift -- 将 数组 开头 的 单元 移出 数组 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

Sfrnuits = annmay( ua = 人 翌 "D = 全 从 人 CU => 记 宁 0 由 == 外) 

echo ' 原 始 的 数组 :'， 

print_r($fruits); 

echo '<br/>'; 

array_Sshift($fruits ) ， 

echo ' 移 出 后 的 数组 :'， 

print_r($fruits); 


?> 


output 


原始 的 数组 : Array ( [a] => 柠檬 [b] => 香蕉 [c] => 苹果 [d] => 梨子 ) 
移出 后 的 数组 : Array ( [b] => 香蕉 [c] => 苹果 [d] => 如 子 ) 


12. array_rand -- 从 数组 中 随机 取出 一 个 或 多 个 单元 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruits = array (' 柠 榜 '，' 香 蕉 '，' 苹 果 '，' 梨 子 ' ) ) 

echo ' 原 始 的 数组 :'， 

print_r ( $fruits ); 

echo '<br/>'; 

$newArr_key = array_rand ( $fruits, 2 ); 

echo ' 随 机 后 的 数组 :'， 

echo $fruits [$newArr_key [0]].'&nbsp;'; 

echo $fruits [$newArr_key [1]]; 


?> 


output 


原始 的 数组 : Array ( [9] => 柠檬 [1] => 香蕉 [2] => 苹果 [3] => 梨子 ) 
随机 后 的 数组 : 梨子 苹果 


13. array_pop -- 将 数组 最 后 一 个 单元 弹出 (出 栈 ) 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruits = array (' 柠 樟 '，' 香 蕉 '，' 苹 果 '，' 杂 子 ， ); 

echo ' 原 始 的 数组 :'， 

print_r ( $fruits ); 

echo '<br/>'; 

array_pop ( $fruits ); 

echo ' 弹 出 后 的 数组 :'， 

print_r ( $fruits ); 


?> 


Output: 


原始 的 数组 : Array ( [9] => 柠檬 [1] => 香 攻 [2] => 苹果 [3] => 梨子 ) 
弹出 后 的 数组 : Array ( [6] => 柠 榜 [1] => 香蕉 [2] => 苹果 ) 


14. array_push -- 将 一 个 或 多 个 单元 压 入 数组 的 末尾 〈 入 栈 ) 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

$fruits = arrag ("和 仿 194 类 79 “和 当 0 " 杀 守 2 

echo ' 原 始 的 数组 :'， 

print_r ( $fruits ); 

echo '<br/>'; 

array_push ( $fruits，' 柿 子 ' ) ， 

echo ' 弹 出 后 的 数组 :'， 

print_r ( $fruits ); 


?> 


Output: 


原始 的 数组 : Array ( [9] => 柠檬 [1] => 香蕉 [2] => 羊 果 [3] => 梨子 
弹出 后 的 数组 : Array ( [0] => 柠檬 [1] => 香 攻 [2] => 苹果 [3] => 巢 子 [4] => 柿子 ) 


五 . 数组 的 指针 的 操作 

each -- 返回 数组 中 当前 的 键 一 值 对 并 将 数组 指针 向 前 移动 一 步 
current -- 返回 数组 中 的 当前 单元 

reset -- 将 数组 的 内 部 指针 指向 第 一 个 单元 

end -- 将 数组 的 内 部 指针 指向 最 后 一 个 单元 

next -- 将 数组 中 的 内 部 指针 向 前 移动 一 位 

pos -- current() 的 别名 


prev -- 将 数组 的 内 部 指针 倒 回 一 位 


<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<?php 

PUTts = Anray (TT 忱 人 

print_r ( $fruits ); 


echo '<br/>'; 


echo 'each() : '; 
print_r ( each ( $fruits ) ); 


echo '<br/>'; 


echo 'current() : '; 
echo (current ( $fruits )); 


echo '<br/>'; 


echo° next() 
echo (next ( $fruits )); 


echo '<br/>'; 


echo 'end() : '; 
echo (end ( $fruits )); 


echo '<br/>'; 


echo 'prev() : '; 
echo (prev ( $fruits )); 


echo '<br/>'; 


echo 'pos() : '; 
echo (pos ( $fruits )); 
echo '<br/>'; 


?> 


Output: 


Array ( [9] => 柠檬 [1] => 香蕉 [2] => 苹果 [3] => 梨子 ) 
each() : Array ( [1] => 柠檬 [value] => 柠檬 [0] => 0 [key] => 0 ) 
current() : 香蕉 


end() : 梨子 
prev() : 苹果 
pos() : 苹果 


六 统计 数组 个 数 
count -- 计算 数组 中 的 单元 数目 或 对 象 中 的 属性 个 数 
sizeof -- count() 的 别名 


array_count values -- 统计 数组 中 所 有 的 值 出 现 的 次 数 


<?php 


$numss = armay (35 13457 00 2 2 1 4 4114 5 4 5 4 


echo count ( $nums ); 


echo '<br>'，; 


echo sizeof ( $nums ); 


echo '<br>'，; 


$arrayCount = array_count_values ( $nums ); 
print_r ( $arrayCount ); 


?> 


22 
22 
Array ( [1] => 6 [3] => 2 [5] => 4 [4] => 7 [65] => 1 [2] => 2 ) 


七 :将 数组 转换 成 标量 变量 : extract() 


把 数组 中 的 每 个 元 素 转换 成 变量 ， 变 量 名 是 数组 元 素 的 key, 变 量 值 为 数组 元 素 的 value. 


<?php 
$fruits = array('a'=>'apple', 'b'=>'banana', 'o0'=>'orange' ); 


extract($fruits); 


echo $a.'<br>"'， 
echo $b.'<br>"'，; 
echo $0.'<br>'; 


?> 


output 


apple 
banana 
orange 


第 六 章 目录 与 文件 


一 . 目录 操作 
basename -- 返回 路 径 中 的 文件 名 部 分 
回 


dirname -- 返回 路 径 中 的 目录 部 分 


(可 


pathinfo -- 返回 文件 路 径 的 信 ， 


realpath -- 返回 规范 化 的 绝对 路 径 名 


<?php 


$path = 'demo1.php'; 


$path = realpath($path ) ; 


echo basename($path ) ， 


echo "<br> ' ， 


echo dirname($path ) ; 


echo "<br> ' ， 


$array_path = pathinfo($path ) ， 


echo 'basename : '.$array_path['basename'].'<br>'; 
echo 'dirname : '.$array_path['dirname'].'<br>'; 
echo 'extension : '.$array_path['extension'].'<br>'; 
echo 'filename : '.$array_path['filename'].'<br>'; 
2 

Output: 
demo1.php 


D:\AppServ\www\Basic6 

basename : demoi1.php 

dirname : D:\AppServ\www\Basic6 
extension : php 

filename : demo1 


二 磁盘、 目录 和 文件 计数 


1. 查 看 文件 大 小 和 磁盘 空间 
filesize -- 取得 文件 大 小 
disk_free_space -- 返回 目录 中 的 可 用 空间 
disk_total_space -- 返回 一 个 目录 的 磁盘 总 大 小 
<?php 
$path ='demo2.php'; 
$path = realpath($path); 
$drive = 'c:',; 
echo round(filesize($path)/1024,2).'Kkb'.'<br/>'; 


echo round(disk_free_ space($drive)/1024/1024/1024,2).'GB'.'<br/>'; 


echo round(disk_ total space($drive)/1024/1024/1024,2).'GB'.'<br/>'; 


?> 


output 


0.26kb 
10.616GB 
30.016GB 


2. 获 得 文件 的 各 种 时 间 
fileatime -- 取得 文件 的 上 次 访问 时 间 
filectime -- 取得 文件 的 inode 修改 时 间 


filemtime -- 取得 文件 修改 时 间 


<?php 
$file = realpath ( '../Basic5/demo3.php' ); 


$date_ format = 'Y-m-d h:i:s'; 


echo 'lastest accessing time : '.date ( $date format, fileatime ( $file ) ) . '<br>'，; 
echo 'lastest change time : '.date ( $date format, filectime ( $file ) ) . '<br>'; 
echo 'lastest modify time : '.date ( $date format, filemtime ( $file ) ) . '<br>'; 
?5 

output 


lastest accessing time : 2011-12-18 04:26:49 
lastest change time : 2011-12-18 04:26:49 
lastest modify time : 2011-12-18 04:29:15 


三 . 文件 处 理 

文件 读 写 的 两 种 方式 : 

1.php 所 有 版 本 都 支持 的 方法 : 

fopen -- 打开 文件 或 者 URL 

fclose -- 关闭 一 个 已 打开 的 文件 指针 

fwrite -- 写 入 文件 (可 安全 用 于 二 进 制 文件 ) 


表 1.fopen() 中 mode 的 可 能 值 列 表 


XE 


<?php 


说 明 
只 读 方式 打开 ， 将 文件 指针 指向 文件 头 。 
读 写 方式 打开 ， 将 文件 指针 指向 文件 头 。 


写 入 方式 打开 ， 将 文件 指针 指向 文件 头 并 将 文件 大 小 截 为 零 。 如 果 文 件 不 存在 
则 尝试 创建 之 。 


读 写 方式 打开 ， 将 文件 指针 指向 文件 头 并 将 文件 大 小 截 为 零 。 如 果 文件 不 存在 
则 尝试 创建 之 。 


写 入 方式 打开 ， 将 文件 指针 指向 文件 末尾 。 如 果 文 件 不 存在 则 尝试 创建 之 。 
读 写 方式 打开 ， 将 文件 指针 指向 文件 末尾 。 如 果 文 件 不 存在 则 尝试 创建 之 。 


创建 并 以 写 入 方式 打开 ， 将 文件 指针 指向 文件 头 。 如 果 文 件 已 存在 ， 则 

fopen() 调用 失败 并 返回 FALSE ， 并 生成 一 条 E_WARNING 级 别 的 错误 信息 。 
如 果 文 件 不 存在 则 尝试 创建 之 。 这 和 给 底层 的 open(2) 系统 调用 指定 
0_EXCL&#124;0_CREAT 标记 是 等 价 的 。 此 选项 被 PHP 4.3.2 以 及 以 后 的 版 本 所 支 
持 ， 仅 能 用 于 本 地 文件 。 


创建 并 以 读 写 方式 打开 ， 将 文件 指针 指向 文件 头 。 如 果 文 件 已 存在 ， 则 

fopen() 调用 失败 并 返回 FALSE ， 并 生成 一 条 E_WARNING 级 别 的 错误 信息 。 
如 果 文 件 不 存在 则 尝试 创建 之 。 这 和 给 底层 的 open(2) 系统 调用 指定 
0_EXCL&#124;0_CREAT 标记 是 等 价 的 。 此 选项 被 PHP 4.3.2 以 及 以 后 的 版 本 所 支 
持 ， 仅 能 用 于 本 地 文件 。 





$fp = fopen('filel1.txt','w'); 


$outStr = "my name is anllin,\r\nmy age is 29."; 


fwrite($fp,$outStr, strlen($outStr)); 


fclose($fp); 


?> 


output 


my name is anillin, 


my age is 29. 


2.php5 新 加 入 的 方法 


file_put_contents -- 将 一 个 字符 串 写 入 文件 


<?php 
file_put_contents( 'file2.txt'， "my name is anllin,\r\nmy age is 29."); 


?> 


output 


my name is anllin, 


my age is 29. 


读 出 文件 内 容 的 方法 : 
Fgetc() 读 出 一 个 字符 ， 并 将 指针 移 到 下 一 个 字符 
Fgets() 读 出 一 行 字符 ， 可 以 指定 一 行 显示 的 长 度 。 
Fgetss() 从 文件 指针 中 读 取 一 行 并 过 滤 掉 HTML 标 记 
Fread() 读 取 定量 的 字符 
Fpassthru() 输出 文件 到 指定 处 的 所 有 剩余 数据 
File() 将 整个 文件 读 入 数组 中 ， 以 行 分 组 
Readfile() 读 入 一 个 文件 并 写 入 到 输出 缓冲 
File_get_contents() 将 整个 文件 读 入 一 个 字符 事 
Feof() 判断 读 完 文件 函数 
File_exists() 查看 文件 是 否 存 在 


示例 文件 file1.txt 的 内 容 如 下 : 


my name is anillin, 


my age is 29. 


fgetc -- 从 文件 指针 中 读 取 字 符 


Demo.php 


<?php 

$fp = fopen('file1.txt','r'); 
echo fgetc($fp); 

echo fgetc($fp); 

fclose($fp ) ， 


?> 


Output: 


my 


fgets -- 从 文件 指针 中 读 取 一 行 


<?php 

$fp = fopen('file1.txt','r'); 
echo fgets($fp) 

echo fgets($fp) 

fclose($fp); 


?> 


output 


my name is anllin, my age is 29. 


fgetss -- 从 文件 指针 中 读 取 一 行 并 过 滤 掉 HTML 标记 


<?php 

$fp = fopen('file3.txt', 'w'); 

$outStr = "my name is <b>anllin</b>"; 
fwrite($fp,$outSstr,strlen($outStr)); 


fclose($fp); 


$ftp = fopen('file3.txt','r'); 
echo fgetss($ftp); 
fclose($ftp); 


?> 


Output 


my name is anllin 


fread -- 读 取 文件 (可 安全 用 于 二 进 制 文件 ) 


<?php 

$filename = 'filei1.txt'; 

$fp = fopen($filename, 'r'); 

$contents = fread($fp,filesize($filename)); 
echo $contents; 

fclose($fp); 


?> 


Output 


my name is anllin, my age is 29. 


fpassthru -- 输出 文件 指针 处 的 所 有 剩余 数据 


<?php 

$filename = 'filei1.txt'; 

$fp = fopen($filename, 'rb'); 
$leftSize = fpassthru($fp); 
echo $leftSize; 

fclose($fp); 


?> 


output 


my name is anllin, my age is 29. 33 


file -- 把 整个 文件 读 入 一 个 数组 中 


<?php 
$lines = file('filel1.txt'); 
foreach ($lines as $line_num => $line) 


{ 


echo $line num.' : '.$line.'<br>"'，; 


?> 


output 


90 : my name is anllin, 
1 : my age is 29， 


readfile -- 输出 一 个 文件 


<?php 
$size = readfile('file1.txt'); 
echo $size; 


?> 


output 
my name is anllin, my age is 29.33 
file_get_contents -- 将 整个 文件 读 入 一 个 字符 串 (php5.0 新 增 ) 
<?php 
$contents = file_get_contents( 'file1.txt')， 
echo $contents ; 
2 


output 


my name is anllin, my age is 29. 


feof -- 测试 文件 指针 是 否 到 了 文件 结束 的 位 置 


<?php 
$fp = fopen('file1.txt','r'); 
while(!feof($fp)) 
{ 
echo fgetc($fp); 
} 
fclose($fp); 


?> 


output 


my name is anllin, my age is 29. 


file_exists -- 检查 文件 或 目录 是 否 存在 


<meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
<?php 
$filename = 'filei1.txt'; 


if(file_ exists($filename)) 


{ 
echo “' 执 行文 件 读 写 操作 ' ; 
else 
{ 
echo ' 你 要 找 的 文件 不 存在 ' 1; 
} 
?> 
output 
执行 文件 读 写 操作 


filesize -- 取得 文件 大 小 


<?php 
$file_size = filesize('filel1.txt'); 
echo $file size; 


?> 


output 


33 


unlink -- 删除 文件 


<?php 
$isDeleted = unlink('file3.txt'); 
echo $isDeleted; 


?> 


output 


rewind -- 倒 回 文件 指针 的 位 置 
ftell -- 返回 文件 指针 读 / 写 的 位 置 


fseek -- 在 文件 指针 中 定位 


<?php 

$fp = fopen ( 'filei1.txt', 'r' ); 
fgetc ( $fp ); 

fgetc ( $fp ); 

echo ftell ( $fp ) . '<br>'; 
rewind ( $fp ); 

echo ftell ( $fp ) . '<br>'; 
fgetc ( $fp ); 

fgetc ( $fp ); 

echo ftell ( $fp ) . '<br>'; 
fseek($fp,0);//same as rewind ($fp) 


echo ftell ( $fp ) . '<br>'; 


?> 
output 
2020 
Flock 的 操作 值 
操作 值 意义 
LOCK_SH( 以 前 为 1) 读 写 锁定 。 这 意味 着 文件 可 以 共享 ， 其 他 人 可 以 读 该 文件 
LOCK_EX( 以 前 为 2) 写 操作 锁定 。 这 是 互 斥 的 ， 该 文件 不 能 被 共享 
LOCK_UN( 以 前 为 3) 释放 已 有 的 锁定 
LOCK_NB( 以 前 为 4) 防止 在 请 求 加 锁 时 发 生 阻塞 


flock -- 轻便 的 咨询 文件 锁定 


<?php 

$filename = 'filei1.txt'; 

$fp = fopen($filename, 'rb'); 

flock($fp, LOCK_EX);//locked 

$contents = fread($fp,filesize($filename)); 
flock($fp,LOCK_UN);//unlocked 

echo $contents; 

fclose($fp); 


?> 


output 


my name is anllin, my age is 29. 


目录 句 桥 操作 
opendir -- 打开 目录 句柄 
readdir -- 从 目录 句柄 中 读 取 条 目 


closedir -- 关闭 目录 句柄 


<?php 
$dir= opendir('../Basic6'); 
while(!!s$file = readdir($dir)) 
{ 

echo $file.'<br/>'; 


} 
closedir ($dir); 


?> 


output 


.buildpath 
.project 

.Settings 
demo1.php 
demo10 .php 
demo11.php 
demo12 .php 
demo13 .php 
demo14.php 
demo15 .php 
demo16 .php 
demo17 .php 
demo18 .php 
demo19 .php 
demo2 .php 
demo20.php 
demo3.php 
demo4.php 
demo5 .php 
demo6 .php 
demo7 .php 
demo8 .php 
demo9 .php 
file1.txt 
file2.txt 


scandir -- 列 出 指定 路 径 中 的 文件 和 目录 


<?php 
$files = scandir('../Basic6'); 
foreach($files as $file) 


{ 


echo $file.'<br>'; 


output 


.buildpath 
.project 

.Settings 
demo1.php 
demo10 .php 
demo11.php 
demo12 .php 
demo13 .php 
demo14.php 
demo15 .php 
demo16 .php 
demo17 .php 
demo18 .php 
demo19 .php 
demo2 .php 
demo20 .php 
demo21.php 
demo3 .php 
demo4.php 
demo5 .php 
demo6.php 
demo7 .php 
demo8.php 
demo9.php 
ilet. txXt 

file2.txt 


rename -- 重 命名 一 个 文件 或 目录 
<?php 
rename('demo1.php', 'demo01.php' ); 
if(file exists('demo01.php')) 
{ 
echo 'file rename success'; 
else 
echo 'file rename fail'; 
?> 
output 


file rename success 


rmdir -- 删除 目录 


<?php 

rmdir('123"); 

if(file_ exists('123')) 
{ 


echo 'delete file fail'; 


echo 'delete file success'; 


?> 


output 


delete file success 


第 七 章 自 定义 函数 


使 用 自 定义 函数 的 目的 : 避免 大 量 重 复 代 码 的 出 现 。 
7.1: 标准 函数 


标准 php 发 行 包 中 有 1000 多 个 标准 函数 ， 这 些 标准 函数 都 是 系统 内 置 的 ， 不 需要 用 户 创建 就 可 
以 直接 使 用 


如 : 
<?php 
echo md5( '123456 ' ) ; 
echo '<br/>'; 
echo Sha1( '123456 ' ) ; 
echo '<br/>'; 
echo pi(); 
?> 
output 


el10adc3949ba59abbe56e057f20f883e 
7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359 


7.2 . 自 定义 函数 

7.2.1 函 数 命名 基本 原则 : 

1. 有 函数 名 不 能 和 已 有 的 函数 名 重 名 。 

2. 函 数 名 只 能 包含 字母 、 数 字 和 下 划 线 。 
3. 函 数 名 不 能 以 数字 开头 


7.2.2 基 本 使 用 : 用 function 进 行 声明 


<?php 
// 创 建 函 数 
function funcCountArea($radius) 


{ 


return $radius*$radius*pi(); 


// 使 用 函数 
$area = funcCountArea(20); 
echo $area; 


echo '<br/>'; 


$area2 = funcCountArea(30); 
echo $area2 ， 


?> 


output 


1256.63706144 
2827 .43338823 


7.2.3 按 值 传 参 


<?php 


funcChange ($a); 
echo $a; 


?> 


output 


7.2.4 按 引用 传 参 


<?php 
$a =5, 


function funcChange(&$a) 


funcChange ($a); 
echo $a; 


?> 


output 


10 


7.2.5 返 回 多 个 值 的 函数 调用 


<?php 
function funcUserIinfo($username,$password) 


{ 


$userInfo = array($username, $password); 


return $userInfo; 


$arr = funcUserIinfo('anllin', '123456' ); 


print_r($arr); 


?> 


output 


Array ( [0] => anllin [1] => 123456 ) 


7.2.6 另 一 种 返回 多 个 值 的 函数 调用 (实用 : 推荐 ) 


<?php 


function funcUserIinfo($username, $password) 


{ 
$userInfo [] = $username; 
$userIinfo [] = $password; 
return $userInfo; 

} 


$arr[] = funcUserInfo ( 'Bob', '512655' ); 
$arr[] = funcUserInfo ( 'John', '458736' ); 
$arr[] = funcUserInfo ( 'Mark', '925472' ); 
print_r ( $arr ); 


?> 


output 


Array ( [0] => Array ( [0] => Bob [1] => 512655 ) [1] => Array ( [0] => John [1] => 45873 
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注意 : 函数 调用 是 不 区 分 大 小 写 的 


7.2.7 理 解 作 用 域 : 


在 函数 内 部 声明 的 变量 。 
全 局 变量 : 
在 函数 外 部 声明 的 变量 。 


7.2.8 局 部 变量 转换 成 全 局 变量 


<?php 
Pas =D, 
function funcChangeValue() 


{ 
global $a; 


$a = 10; 


funcCchangeValue( ); 


echo $a; 


?> 


output 


10 


7.2.9 超 级 全 局 变量 $GLOBALR 的 使 用 


<?php 
$GLOBALS['a'] = 5; 
function funcChangeValue() 


{ 


$GLOBALS['a'] = 10; 


funcCchangeValue( ); 


echo $GLOBALS['a'l]; 


?> 


Output 


10 


7.3 “文件 包含 


7.3.1 Include 的 使 用 ， 可 以 包含 相同 的 文件 多 次 


<?php 

include 'demo1.php'; 
include 'demo1.php'; 
include 'demo1.php'; 


?> 


output 


el10adc3949ba59abbe56e057f20f883e 
7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359 
el10adc3949ba59abbe56e057f20f883e 
7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359 
el10adc3949ba59abbe56e057f20f883e 


7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359 


7.3.2 include_once 使 用 上 和 include 没 什么 区 别 ， 但 是 调用 多 次 只 会 包含 相同 的 文件 一 次 


<?php 

include_once 'demo1.php'; 
include_once 'demo1.php'; 
include_once 'demo1.php'; 


?> 


output 


el10adc3949ba59abbe56e057f20f883e 
7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359s 


7.3.3 require() 语句 包含 并 运行 指定 文件 。 


<?php 

require 'demo1.php'; 
require 'demo1.php'; 
require 'demo1.php'; 


?> 


output 


el10adc3949ba59abbe56e057f20f883e 
7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359 
el10adc3949ba59abbe56e057f20f883e 
7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359 
el10adc3949ba59abbe56e057f20f883e 


7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359 


7.3.4 require_once() 语 多 在 脚本 执行 期 间 包 含 并 运行 指定 文件 .但 是 不 重复 包含 相同 的 文件 。 


<?php 

require_once 'demo1.php'; 
require_once 'demo1.php'; 
require_once 'demo1.php'; 


?> 


output 


el10adc3949ba59abbe56e057f20f883e 
7c4a8d09ca3762af61e59520943dc26494f8941b 
3.14159265359s 


7.3.5 include 与 require 的 区 别 


Include 后 面 如 果 还 有 其 他 代码 ， 当 调用 include 出 错时 ， 后 面 的 代码 还 会 继续 执行 ， 但 是 
require 则 不 会 。 


Include 在 调用 一 个 不 存在 的 文件 时 ， 会 给 出 警告 ， 但 是 会 继续 执行 后 面 的 代码 。 


<?php 


include 'demo111.php'; 


echo('this is demo13.php'); 


55 


output 


Warning: include(demo111.php) [function.include]: failed to open stream: No Such file or 


Warning: include() [function.include]: Failed opening 'demo111.php' for inclusion (includ 
this Is demo13.php 


4| |: 


Require 在 调用 一 个 不 存在 的 文件 时 ， 会 给 出 一 个 错误 ， 并 中 止 代码 的 执行 。 








<?php 


require 'demo111.php'; 


echo('this is demo14.php'); 


?> 


Output 


Warning: require(demo111.php) [function.require]: failed to open stream: No Such file or 


Fatal error: require() [function.require]: Failed opening required 'demo111.php' (include 
== 一 一 一 字 主 


7.4: 魔法 常量 





涛 杰 描述 
_ FILE_ 当前 文件 名 
_LINE 当前 行 号 
_ FUNCTION _ 当前 函数 名 
_CLASS | Dl 
_ METHOD 当前 方法 名 





所 谓 的 魔法 常量 ， 并 不 是 真 的 常量 ， 而 是 根据 场合 去 获取 固定 值 的 变量 


<?php 
echo _ FILE _ ， 


echo "<br> ' ， 


echo _ LINE ; 


echo '<br>'，; 


function funcTest() 
{ 


echo __FUNCTION ;，; 


} 
funcTest(); 


?> 


output 


D:\AppServ\www\Basic7\demo15.php 
5 
funcTest 


第 八 草 字符 串 处 理 


学 习 要 点 : 

1. 字 符 串 格式 化 

2. 操 作 子 字符 串 

3. 字 符 串 比较 

4. 查 找 替换 字符 串 

5. 处 理 中 文字 符 

在 每 天 的 编程 工作 中 ， 处 理 、 调 整 以 至 最 后 控制 字符 串 是 很 重要 的 一 部 分 ， 一 般 也 认为 
这 是 所 有 编程 语言 的 基础 。 不 同 与 其 他 语言 ，PHP 没有 那么 麻烦 地 使 用 数据 类 型 来 处 理 字 

符 串 。 这 样 一 来 ，PHP 中 的 字符 串 处 理 就 再 容易 不 过 了 。 

一 .字符 串 格 式 化 

整理 字符 串 的 第 一 步 是 清理 字符 串 中 多 余 的 空格 。 虽 然 这 一 部 操作 不 是 必需 的 ， 但 如 果 


要 将 字符 串 存 入 一 个 文件 或 数据 库 中 ， 或 者 将 它 和 别 的 字符 串 进 行 比较 ， 这 就 是 非常 有 用 


chop() 函 数 移 除 字符 串 后 面 多 余 的 室 白 ， 包 括 新 行 。 
rtrim() 函 数 移 除 字符 串 后 面 多 余 的 空白 ， 包 括 新 行 ， 此 函数 是 chop() 的 别名 。 


<?php echo trim(' PHP > 


PHP 具有 一 系列 可 供 使 用 的 函数 来 重新 格式 化 字符 串 ， 这 些 函 数 的 工作 方式 是 各 不 相 
同 的 。 


nl2br() 辑 数 将 字符 串 作 为 输入 参数 ， 用 XHTML 中 的 <br/> 标 记 代替 字符 串 中 的 换行 符 。 


<?php echo nl2br("This is a Teacher!\nThis is a Student!"); ?> 


将 特殊 字符 转换 为 HTML 等 价 形式 ， 可 以 使 用 htmlentities() 和 htmlspecialchars 函数 。 


如 果 想 要 去 掉 字 符 串 中 的 HTML 去 掉 ， 可 以 使 用 strip_tags() 有 函数 


<?php echo htmlentities('<strong> 我 是 吴 祁 !</strong>'); // 转 换 所 有 字符 
echo htmlspecialchars('<strong> 我 是 吴 祁 ! </strong>') // 转 换 特殊 字符 
echo strip_tags('<strong> 我 是 吴 祁 1!</strong>') // 去 掉 了 <strong> 

?> 


对 于 字符 串 来 说 ， 某 些 字符 肯定 是 有 效 的 ， 但 是 当 将 数据 插入 到 数据 库 中 的 时 候 可 能 会 
引起 一 些 问题 ， 因 为 数据 库 会 将 这 些 字符 解释 成 控制 符 。 这 些 有 问题 的 字符 就 是 引号 ( 单 引 
号 和 双 引 ) 、 反 斜 杠 (\) 和 NULL 字符 。 

PHP 提供 了 两 个 专门 用 于 转 义 字符 串 的 函数 。 在 将 任何 字符 串 写 到 数据 库 之 前 ， 应 该 
使 用 addslashes() 将 它们 重新 格式 化 ， 


在 调用 了 addslashes() 后 ， 所 有 的 引号 都 加 了 斜 本 ， 而 stripslashes() 有 函数 去 掉 了 这 些 斜 杠 。 


<?php echo addslashes('This is \a" Teacher! '); ?> 


可 以 重新 格式 化 字符 串 中 的 字母 大 小 写 。 
strtoupper() 函 数 将 字符 串 转 换 为 大 写 
strtolower() 函 数 将 字符 串 转换 成 小 写 
ucfirst() 函 数 将 第 一 个 字母 转换 为 大 写 


Ucwords() 函 数 将 每 个 单词 第 一 个 字母 转换 为 大 写 


<?php echo strtoupper('yc60.com@gmail.com'); ?> 


oy 


里 充 字 符 串 郊 数 : str_pad() 将 字符 串 用 指定 个 数 的 字符 填充 字符 串 。 


<?php echo str_pad('Salad',10).'is good.'; ?> 


二 操作 子 字符 串 

通常 ， 我 们 想 查看 字符 串 的 各 个 部 分 。 例 如 ， 查 看 句子 中 的 单词 ， 或 者 将 一 个 域名 或 电 
子 邮件 地 址 分 割 成 一 个 个 的 组 件 部 分 。PHP 提供 了 几 个 字符 串 函 数 来 实现 此 功能 。 
使 用 函数 explode()、implode() 和 join() 

为 了 实现 这 个 功能 ， 我 们 将 使 用 的 第 一 个 函数 是 explode()。 


使 用 implode() 或 join() 函 数 来 实现 与 函数 explode() 相 反 的 效果 ， 这 两 个 函数 的 效果 是 一 


致 的 。 


<?php $email = 'yc60.com@gmail.com'; $email array = explode('@',$email); ?> 


使 用 strtok() 有 函数 
strtok() 元 数 一 次 只 从 字符 串 取 出 一 些 片 段 ( 称 为 令 牌 )。 对 于 一 次 从 字符 串 中 取出 一 个 


单词 的 处 理 来 说 ，strtok() 函 数 比 explode() 函 数 的 效果 更 好 。 


<?php $str = "I,will.be#back"; $tok = strtok($str,",.#"); while($tok) { echo "$tok<br 
$tok = strtok("™", .#"); 
} ?> 





使 用 substr() 驾 数 
函数 substr() 允 许 我 们 访问 一 个 字符 串 给 定 起 点 和 终点 的 子 字符 串 。 这 个 函数 并 不 适 
于 我 们 的 例子 中 ， 但 是 ， 当 需要 得 到 某 个 国定 格式 字符 串 中 的 一 部 分 时 ， 它 会 非常 有 用 。 


<?php echo substr("abcdef", 1, 3); ?> 


分 解 字符 串 : str_split() 返 回 一 个 数组 ， 其 中 各 数组 元 素 分 别 是 字符 串 参 数 中 的 一 个 字符 
串 。 


<?php print_r(str_split('This is a Teacher!')); ?> 


逆 置 字符 串 : strrev() 可 以 将 一 个 字符 串 逆反 过 来 。 


<?php echo strrev('This is a Teacher!'); ?> 


三 .字符 串 比 较 
到 目前 为 止 ， 我 们 已 经 用 过 "= =" 号 来 比较 两 个 字符 串 是 否 相 等 。 使 用 PHP 可 以 进行 一 
些 更 复杂 的 比较 。 这 些 比 较 分 为 两 类 : 部 分 匹配 和 其 他 情况 。 

字符 串 的 排序 : strcmp()、strcasecmp() 和 strnatcmp() 
该 函数 需要 两 个 进行 比较 的 参数 字符 囊 。 如 果 这 两 个 字符 串 相 等 ， 该 函数 返回 0， 如 果 
按 字典 顺序 str1 和 str2 后 面 (大 于 str2 ) 就 返回 一 个 正 数 ， 如 果 str1 小 于 str2 就 返回 一 个 负 
数 。 这 个 函数 是 区 分 大 小 写 的 。 


函数 strcasecmp() 除 了 不 区 分 大 小 写 之 外 ， 其 他 和 strcmp() 一 样 。 


区 数 strnatcmp() 及 与 之 对 应 的 不 区 分 大 小 写 的 strnatcasecmp() 远 数 是 在 PHP4 中 新 增 的 。 


这 两 个 函数 按 "自然 排序 "比较 字符 串 ， 所 谓 自 然 排序 是 按 人 们 习惯 的 顺序 进行 排序 。 
<?php echo strcmp('a','b'); ?> 
使 用 strspn() 均 数 返 回 一 个 字符 囊 中 包含 有 另 一 个 字符 串 中 字符 的 第 一 部 分 的 长 度 。 也 
就 是 求 两 个 字符 串 之 间 相 同 的 部 分 。 
<?php echo strspn('gmail', 'yc60.com@gmail.com'); ?> 
使 用 strlen() 函 数 测试 字符 串 的 长 度 
可 以 使 用 函数 strlen() 来 检查 字符 串 的 长 度 。 如 果 传 给 它 一 个 字符 串 ， 这 个 函数 将 返回 
字符 串 的 长 度 。 例 如 , strlen("hello") 将 返回 5. 


<?php echo strlen('This is a Teacher!'); ?> 


确定 字符 串 出 现 的 频率 : substr_count() 返 回 一 个 字符 串 在 另 一 个 字符 串 中 出 现 的 次 数 。 


<?php echo substr_count('yc60.com@gmail.com','c'); ?> 


四 ' 查找 替换 字符 串 
通常 ， 我 们 需要 检查 一 个 更 长 的 字符 串 中 是 否 含有 一 个 特定 的 子 字符 串 。 这 种 部 分 匹配 
通常 比 测试 字符 串 的 完全 等 价 更 有 用 处 。 
在 字符 串 中 查找 字符 串 : strstr()、strchr()、strrchr() 和 stristr() 
函数 strstr() 是 最 常见 的 ， 它 可 以 用 于 在 一 个 较 长 的 字符 串 专 供 查 找 匹 配 的 字符 串 或 字 
符 。 请 注意 ， 函 数 strchr() 和 strstr() 完 全 一 样 。 
<?php echo strstr('yc60.com@gmail.com', '@'); ?> 
函数 strstr() 有 两 个 变 体 。 第 一 个 变 体 是 stristr()， 它 几乎 和 strstr() 一 样 ， 其 区 别 在 于 不 区 


分 字符 大 小 。 对 于 我 们 的 只 能 表单 应 用 程序 来 说 ， 这 个 函数 非常 有 用 ， 因 为 用 户 可 以 输入 


"delivery"、"Delivery" 和 "DELIVERY"。 


站 


第 二 个 变 体 是 strrchr()， 它 也 几乎 和 strstr() 一 样 ， 只 不 过 是 strstr() 的 别名 。 


查找 字符 串 的 位 置 : strpos()、strrpos() 。 


函数 strpos() 和 strrpos() 的 操作 和 strstr() 类 似 ， 但 它 不 是 返回 一 个 子 字符 串 ， 而 返回 子 字 
符 串 needle 在 字符 串 haystack 中 的 位 置 。 更 有 趣 的 是 ， 现 在 的 PHP 手册 建议 使 用 strpos() 
函数 代替 strstr() 函 数 来 查看 一 个 子 字符 串 在 一 个 字符 串 中 出 现 的 位 置 ， 因 为 前 者 的 运行 速度 


更 快 。 


<?php echo strrpos('yc60.com@gmail.com','c'); ?> 


替换 字符 串 : str_replace()、str_ireplace()、substr_replace() 


<?php echo str_replace('@','#','yc60.com@gmail.com'); echo substr_replace('yc60.com@gmail 
古 == 王立 


五 .处 理 中 文字 符 





对 于 以 上 的 字符 串 函 数 ， 有 些 可 以 用 于 中 文 ， 但 有 些 却 不 适用 中 文 。 所 以 ，PHP 提供 
了 专门 的 元 数 来 解决 这 样 的 问题 。 

中 文字 符 可 以 是 gbk,utf8,gb2312 

mb _strlen() 对 应 的 函数 为 strlen() 求 字 符 串 的 长 度 

mb_strstr() 对 应 的 元 数 为 strstr() 求 菜 字符 串 到 结尾 的 字符 

mb _strpos() 对 应 的 函数 为 strpos() 求 出 字符 最 先 出 现 处 

mb _substr() 对 应 的 函数 为 substr() 取出 指定 的 字符 串 

mb_substr_count() 对 应 函数 为 substr_str() 返回 字符 串 出 现 的 次 数 

最 后 扫 一 遍 帮 助手 册 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 


第 九 划 正则 表达 式 


学 习 要 点 : 

1. 正 则 表达 式 语法 (Perl 风格) 

2. 正 则 表达 式 中 的 元 素 

3.Perl 风格 函数 

处 理 字符 串 时 ， 有 很 多 较为 复杂 的 字符 串 用 普通 的 字符 串 处 理 函数 无 法 干净 的 完成 。 比 
如 说 ， 可 能 需要 验证 一 个 Email 地 址 是 否 合法 ， 为 此 需要 查看 许多 不 容易 检查 的 规则 。 这 正 
是 正则 表达 式 的 用 武之 地 。 正 则 表达 式 是 功能 强大 而 简明 的 字符 组 ， 其 中 可 以 包含 大 量 的 到 
辑 ， 特 别 值得 一 提 的 是 正则 表达 式 相 当 简 短 。 

一 .正则 表达 式 语法 (Perl 风 格 ) 

Perl 一 直 被 认为 是 最 伟大 的 解析 语言 之 一 ， 它 提供 了 一 种 全 面 的 正则 表达 式 ， 即 使 是 最 
复杂 的 字符 串 模 式 ， 也 可 以 用 这 种 正则 表达 式 语言 搜索 和 替换 。PHP 开发 人 员 认 识 到 ， 与 
其 重新 发 明正 则 表达 式 ， 不 如 让 PHP 用 户 直 接 使 用 声名 赫赫 的 Perl 正则 表达 式 语言 ， 即 Perl 
风格 的 函数 。 

模式 规则 : /php/ 在 字符 串 前 后 加 上 两 条 斜 杠 即 可 。 


匹配 函数 : preg_match() 函 数 在 字符 串 中 搜索 模式 ， 如 果 存 在 则 返回 true， 和 否则 返回 false。 


<?php preg_match('/php/', 'php'); ?> 


二 正则 表达 式 中 的 元 素 
正则 表达 式 中 包含 三 种 元 素 分 别 为 : 量词 、 元 字符 、 修 饰 符 


量 启 


开 配 任何 至 少 包 含 一 个 前 导 字 符 串 


开 配 任何 包含 零 个 或 多 个 前 导 字 符 串 


邢 配 任何 包含 xx 到 y 个 前 导 字 符 串 








匹配 任何 包含 小 写字 母 a-z 的 字符 串 

匹配 任何 包含 大 写字 母 A-Z 的 字符 串 

匹配 任何 包含 数字 0-9 的 字符 串 

匹配 任何 包含 小 写字 母 a、b、c 的 字符 串 
匹配 任何 不 包含 小 写字 母 a、b、c 的 字符 串 
匹配 任何 包含 a-zA-Z0-9 和 下 划 线 的 字符 串 


匹配 任何 包含 a-zA-Z0-9 和 下 划 线 的 字符 串 
匹配 任何 没有 下 划 线 和 字母 数字 的 字符 串 
匹配 任何 数字 字符 ， 和 [0-9] 相 同 

邢 配 任何 非 数字 字符 ， 和 [^0-9] 相 同 





匹配 任何 空白 字符 

匹配 任何 非 空 白字 符 

匹配 是 否 到 达 了 单词 边界 
匹配 是 否 没 有 达到 单词 边界 


匹配 正则 中 的 特殊 字符 


完成 不 区 分 大 小 写 的 搜索 

在 匹配 首 内 容 或 者 尾 内 容 时 候 采 用 多 行 识 别 匹 配 
忽略 正则 中 的 空白 

强制 从 头 开 始 匹配 





等 止 贫 禁 匹配 只 跟 踊 到 最 近 的 一 个 匹配 符 并 结 来 
三 :Perl 风格 函数 


PHP 为 使 用 Perl 兼容 的 正则 表达 式 搜索 字符 串 提 供 了 7 个 函数 ， 包 括 : preg_grep()、 


preg_match()、preg_match_all0)、preg_auote()、preg_replace()、preg _replace _callback() 


和 

preg_split()° 

搜索 字符 串 : preg_grep() 函 数 搜索 数组 中 的 所 有 元 素 ， 返 回 由 与 某 个 模式 匹配 的 所 有 元 
素 组 成 的 数组 。 


<?php $language = array('php','asp','jsp','python', 'ruby'); print_r(preg_grep('/p$/',$lan 


一 


到 








搜索 模式 : preg_match() 元 数 在 字符 囊 中 搜索 模式 ， 如 果 存 在 则 返回 true， 否 则 返回 false。 


<?php echo preg match('/php[1-6]/','php5'); ?> 


电子 邮件 验证 小 案例 (分 组 应 用 ) 


<?php $mode = '/([\Ww\.\ 1{2,10})@(\w{1,}).([a-z]{2,4})/'; $string = 'yc60.com@gmail.com'; 
= 


匹配 模式 的 所 有 出 现 : preg_match_all() 函 数 在 字符 串 中 匹配 模式 的 所 有 出 现 ， 然 后 将 所 





有 匹配 到 的 全 部 放 入 数组 。 


<?php preg_match _ all('/php[1-6]/','phpSsdfphp4sdf11jkphp3sdlfjphp2',$out); print_r($out ) ; 





定 界 特殊 的 正则 表达 式 : preg_quote() 在 每 个 对 于 正则 表达 式 语法 而 言 有 特殊 含义 的 字 
符 前 插入 一 个 反 斜 线 。 这 些 特殊 字符 包含 : $A*()+= 人 [J]|\:<>。 

<?php echo preg_quote('PHP 的 价格 是 : $150'); ?> 
替换 模式 的 所 有 出 现 : preg_replace() 函 数 搜索 到 所 有 匹配 ， 然 后 替换 成 想 要 的 字符 串 返 
回 出 来 。 


<?php echo preg_replace('/php[1-6]/','python', 'This is a php5,This is a php4'); ?> 


ubb 小 案例 : 贪 禁 问题 + 分 组 使 用 () 


<?php $mode = '/\[b\](.*)\[\/b\]/U'; $replace = '<strong>\1</strong>'; $string = 'This is 


“| 一 本 








以 不 区 分 大 小 写 的 方式 将 字符 串 划分 为 不 同 的 元 素 : preg_split() 用 来 分 割 不 同 的 元 素 。 


<?php print_r(preg_split('/[\.@]/','yc60.com@gmail.com' )); ?> 


注 : 目前 为 PHP 使 用 POSIX 风格 的 正则 表达 式 搜 索 字符 串 提 供 了 7 个 函数 ， 包 括 : ereg()、 
ereg_replace() 、 eregi() 、 eregi_replace() 、 split() 、 spliti() 和 sq|_regcase()° 
PS : 和 Perl 风格 基本 相同 ， 可 以 参考 手册 自行 学 习 。 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教 程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 和 否则 后 果 自 
负 。 


第 十 章 日 期 与 时 间 


学 习 要 点 : 


1.PHP 日 期 和 时 间 库 


使 用 PHP 编程 时 ， 与 你 遇 到 的 大 多 数 其 他 类 型 的 数据 相 比 ， 日 期 和 时 间 有 很 大 不 同 。 


因为 日 期 和 时 间 没 有 明确 的 结构 ， 并 且 日 期 的 计算 和 表示 也 很 麻烦 。 在 PHP 中 ， 日 期 和 时 
间 函 数 库 是 PHP 语言 的 一 个 核心 部 分 。 

时 间 惟 是 自 1970 年 1 月 1 日 (600:00:00 GMT) 以 来 的 秒 数 。 它 也 被 称 为 Unix 时 间 
改 (Unix Timestamp) 。Unix 时 间 玲 (Unix timestamp)， 或 称 Unix 时 间 (Unix time)、POSIX 
时 
间 (POSIX time)， 是 一 种 时 间 表 示 方 式 ， 定 义 为 从 格林 威 治 时 间 1970 年 01 月 01 日 00 时 00 
分 00 秒 起 至 现在 的 总 秒 数 。Unix 时 间 惟 不 仅 被 使 用 在 Unix 系统 、 类 Unix 系统 中 ， 也 在 许 
多 其 他 操作 系统 中 被 广泛 采用 。 例 如 (1184557366 表示 2007-07-16 03:42:46 ) 
一 . PHP 日 期 和 时 间 库 
验证 日 期 : checkdate() 函 数 能 够 很 好 地 验证 日 期 ， 提 供 的 日 期 如 果 有 效 ， 则 返回 true， 


否则 返回 false。 


<?php if (checkdate(2,29,2007)) { 
echo ' 日 期 合法 '， 

} else { echo ' 日 期 不 合法 '， 

J 


格式 化 时 间 和 日 期 : date() 函 数 返 回 根据 预定 义 指 令 格 式 化 时 间 和 日 期 的 字符 串 形式 。 


所 有 格式 参数 ， 可 以 参考 手册 。 


<?php echo date('Y-m-d H:i:sa'); // 直 接 输入 日 期 和 时 间 
echo date( ' 今 天 的 日 期 和 时 间 为 :Y/m/d H:i:sa'); // 可 以 播 入 无 关 的 字符 串 
?> 


查看 更 多 时 间 信 息 : gettimeofday() 函 数 返 回 与 当前 时 间 有 关 的 元 素 所 组 成 的 一 个 关联 数 


组 。 


<?php print_r(gettimeofday()); // 可 以 传 入 一 个 真 (1) 
?> 


将 时 间 惟 转换 成 友好 的 值 : getdate() 函 数 接受 一 个 时 间 改 ， 并 返回 一 个 由 其 各 部 分 组 成 
的 关联 数组 。 如 果 不 给 参数 ， 那 么 返回 当前 的 时 间 和 日 期 。 
<?php print_r(getdate(1184557366) ) ?> 
获取 当前 的 时 间 改 : time() 函 数 可 以 获取 当前 的 时 间 戳 ， 并 且 可 以 通过 设置 时 间 惟 的 值 。 
<?php echo date('Y-m-d H:i:s',time()+(7*24*60*60)); ?> 


获取 特定 的 时 间 截 : mktime() 函 数 可 以 生成 给 定 日 期 时 间 的 时 间 戳 。 


<?php echo mktime(14,14,14,11,11,2007); echo date('Y-m-d H:i:s',mktime(14,14,14,11,11,200 
.4 ae 


计算 时 间 差 





<?php $now = time(); $taxday = mktime(0,90,9,7,17,2010); echo round(($taxday - $now)/60/60 
可 一 一 一 


将 日 期 转换 成 时 间 改 : strtotime() 将 人 可 读 的 日 期 转换 为 Unix 时 间 戳 。 





<?php echo strtotime('2007-10-31 14:31:33'); ?> 


计算 时 间 差 

<?php echo (strtotime('2007-10-31 14:31:33') - strtotime('2007-10-31 11:31:33'))/60/60; ? 
了 一 | 
获取 当前 文件 最 后 修改 时 间 : getlastmod() 可 以 得 到 当前 文件 最 后 修改 时 间 的 时 间 惟 。 


<?php echo date('Y-m-d H:i:s',getlastmod()); ?> 


设置 时 区 和 GMT/UTC : 
修改 php.ini 文件 中 的 设置 ， 找 到 [date] 下 的 ;date.timezone = 选项 ， 将 该 项 修改 为 
date.timezone=Asia/Shanghai， 然 后 重新 启动 apache 服务 器 。 


putenv() 函 数 可 以 设置 当前 的 默认 时 区 。 


<?php putenv('TZ=Asia/Shanghai'); echo date('Y-m-d H:i:s'); ?> 


date_default timezone_set() 可 以 设置 当前 的 默认 时 区 。 


date_default_ timezone_get() 可 以 获取 当前 的 默认 时 区 。 


<?php 
date_ default_ timezone_set('Asia/Shanghai'); echo date('Y-m-d H:i:s'); ?> 


取得 本 地 时 间 localtime() 函 数 可 以 取得 本 地 时 间 数 据 ， 然 后 返回 一 个 数组 。 


<?php 
date_default_timezone_set('Asia/Shanghai'); print_r(localtime()); print_r(localtime(time( 


人 


计算 页 面 脚本 运行 时 间 : microtime() 辑 数 ， 该 函数 返回 当前 UNIX 时 间 惟 和 微 秒 数 。 返 





回 格式 为 msec sec 的 字符 串 ， 其 中 sec 是 当前 的 UNIX 时 间 稚 ，msec 为 微 秒 数 。 


<?php function fntime() { list($msec, $sec) = explode(' ', microtime()); return $msec+$se 
} $start_time = fntime(); for($i=0;$i<1000000; $i++) { 


} $end time = fntime(); echo round($end time - $start time,4); ?> 
RES 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 


| 





第 十 一 草 表单 与 验证 


学 习 要 点 : 

1.Header() 函 数 

2. 接 收 及 验证 数据 

我 们 对 Web 感 兴趣 ， 认 为 它 有 用 的 原因 是 其 主要 通过 基于 HTML 的 表单 发 布 和 收集 信 


息 的 能 力 。 这 些 表单 用 来 鼓励 网 站 的 反馈 、 进行 论坛 会 话 、 收 集 在 线 定购 的 邮件 地 址 ， 等 
等 。 


但 是 对 HTML 表单 进行 编码 只 是 有 效 接受 用 户 输 入 的 必须 操作 的 一 部 分 ， 必 须 由 服务 器 端 
组 件 来 处 理 输入 。 

一 Header() 函 数 

标 头 (header) 是 服务 器 以 HTTP 协议 传 HTML 资料 到 浏览 器 前 所 送出 的 字符 囊 ， 在 

标 头 与 HTML 文件 之 间 尚 需 空 一 行 分 隔 。 


1. 用 于 重新 导向 指定 的 URL 


<?php header('Location:http://www.baidu.com'); ?> 


2. 用 于 设置 页 面 字 符 编码 


<?php header('Content-Type: text/html; charset=gbk'); echo ' 嘿 嘿 ， 我 是 中 文 ! 页 面 编码 是 GBK， 文 人 
1 一 |] 


: 除非 启用 了 输出 缓冲 ， 否 则 这 些 命令 必须 在 返回 任何 输出 之 前 执行 





局 用 输出 缓冲 : ob_start() 
<?php ob_start(); ?> 


二 接受 及 验证 数据 


HTML 表单 元 素 





ET 


GET 与 POST 





处 理 表单 时 ， 必 须 指定 输入 到 表单 的 信息 以 何 种 方式 传输 到 其 目的 地 ( method=") 。 
对 此 ，Web 开发 人 员 可 以 采用 GET 和 POST 。 使 用 GET 方法 发 送 数据 时 ， 所 有 域 都 追加 
到 浏览 器 的 URL 后 面 ， 并 且 为 数据 随 URL 地 址 发 送 。 采 用 POST 方法 时 ， 值 会 作为 标准 
值 发 送 。 

PHP 分 别 使 用 $_GET 和 $_POST 超 全 局 变量 来 处 理 GET 和 POST 变量 。 通 过 使 用 这 

两 个 超 全 局 变量 ， 可 以 准确 地 指定 信息 应 当 来 自 哪 里 ， 并 以 你 希望 的 方式 处 理 数据 。 
使 用 $_GET 或 $ POST 来 接收 数据 

1.$_GET[username']， 发 送 的 表单 method 必须 是 get ; 

2.$_POST['username']， 发 送 的 表单 method 必须 是 post ; 

3. 采 用 isset() 来 验证 $_GET[username"] 超 级 全 局 变量 是 否定 义 ; 

4. 使 用 htmlspecialchars() 函 数 将 HTML 特殊 字符 进行 过 滤 。 

对 数据 有 效 性 进行 验证 

1. 使 用 函数 trim() 去 除数 据 的 前 后 空格 ; 

2. 使 用 函数 strlen() 判 断 数据 的 长 度 ; 

3. 使 用 函数 js_numeric() 判 断 数据 是 纯 数字 ; 


4. 使 用 正则 表达 式 验证 邮箱 是 否 合法 。 


<?php if (!isset($ POST['send']) || $_POST['send']!=' 提 交 ') { header('Location:Demol1.php') 
} if (preg match('/([\w\.]{2,255})@([\w\-]{1,255}).([a-z]{2,4})/',$ POST['email'])) { ech 
} else { echo ' 电 子 邮 件 不 合法 '， 

} ?> 


1 a 








注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 


第 十 二 章 会 话 控制 


学 习 要 点 : 
1.Cookie 的 应 用 


2.Session 会 话 处 理 


HTTP ( 超 文本 传输 协议 ) 定义 了 通过 万 维 网 (WWW) 传输 文本 、 图 形 、 视 频 和 所 有 


其 他 数据 所 有 的 规则 。HTTP 是 一 种 无 状态 的 协议 ， 说 明 每 次 请 求 的 处 理 都 与 之 前 或 之 后 的 
请 求 无 关 。 虽 然 这 种 简化 实现 对 于 HTTP 的 普及 做 出 了 卓越 的 贡献 ， 但 对 于 希望 创建 复杂 的 
Web 应 用 程序 的 开发 人 员 来 说 ， 这 点 有 点 困扰 。 为 了 解决 这 个 问题 ， 出 现 了 一 种 在 客户 端 

机 器 上 存储 少量 信息 (cookie) 。 

由 于 cookie 大 小 限制 、 数 量 及 其 他 原因 ， 开 发 人 员 又 提出 了 一 种 解决 方案 : session 会 
话 处 理 。 

一 . Cookie 的 应 用 

设置 cookie : setcookie() 有 函数 可 以 在 客户 端 生 成 一 个 cookie 文件 ， 这 个 文件 可 以 保存 到 
期 时 间 、 名 称 、 值 等 。 

创建 cookie 


<?php setcookie('name','Lee',time()+(7*24*60*60)); ?> 


参数 1 : cookie 名 称 
参数 2 : cookie 值 
参数 3 : cookie 过 期 时 间 


读 取 cookie 


<?php echo $_COOKIE[ 'name']; ? 


删除 cookie 


<?php setcookie('name',''); setcookie('name','Lee',time()-1); ?> 


使 用 Cookie 的 限制 

1、 必 须 在 HTML 文件 的 内 容 输 出 之 前 设置 ; 

2、 不 同 的 浏览 器 对 Cookie 的 处 理 不 一 致 ， 且 有 时 会 出 现 错误 的 结果 。 

3、 限 制 是 在 客户 端的 。 一 个 浏览 器 能 创建 的 Cookie 数量 最 多 为 30 个 ， 并 且 每 个 不 能 
超过 4KB， 每 个 WEB 站 点 能 设置 的 Cookie 总 数 不 能 超过 20 个 。 

二 ' Session 会 话 处 理 

在 使 用 Session 会 话 处 理 ， 儿 须 开 始 session， 使 用 session_start() 开 始 会 话 。 

创建 session 并 读 取 session 


<?php session_start(); $ SESSION['name'] = 'Lee'; echo $_ SESSION['name']; ?> 


判断 session 是 否 存 在 


<?php session_start(); $ SESSION['name'] = 'Lee'; if (isset($ SESSION['name'])) { echo $_ 
> 


-| 


删除 session 


| 





<?php session_start(); $ SESSION['name'] = 'Lee'; unset($ SESSION['name']); echo $_SESSIO 
Me 


销毁 所 有 session 





<?php session_start(); $_ SESSION['name'] = 'Lee'; $ SESSION[ 'name2'] = 'Lee'; session_des 
Ms== = 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 





有 下 


学 习 要 点 : 

1.PHP 上 传 配置 

2.$_FILES 数组 

3.PHP 上 传 函 数 

虽然 大 多 数 人 认为 Web 只 包含 网 页 ， 但 HTTP 协议 实际 上 可 以 传输 任何 文件 ， 如 office 
文档 、PDF、 可 执行 文件 、AVI、 压 缩 文件 及 各 种 其 他 文件 类 型 。 虽 然 FTP 在 历史 上 一 直 是 
向 服务 器 上 传 文件 的 标准 方式 ， 但 通过 网 页 上 传 文件 也 逐渐 流行 起 来 。 

一 "PHP 上传 配置 

有 一 些 配置 指令 可 用 于 精细 地 调节 PHP 的 文件 上 传 功能 。 这 些 指 令 用 来 确定 是 否 启 用 
PHP 的 文件 上 传 、 可 允许 的 最 大 上 传 文件 大 小 、 可 允许 的 最 大 脚本 内 存 分 配 和 其 他 各 种 重 
要 的 资源 。 

1.file_uploads=on|off : 确定 服务 器 上 的 PHP 脚本 是 否 可 以 接受 文件 上 传 。 
2.max_execution_time=integer : PHP 脚本 在 注册 一 个 致命 错误 之 前 可 以 执行 的 最 长 时 
间 ， 以 秒 为 单位 。 

3.memory limit=integer : 设置 脚本 可 以 分 配 到 的 最 大 内 存 ， 以 MB 为 单位 。 这 可 以 防 
止 失控 的 脚本 独占 服务 器 内 存 。 

4.upload_max_filesize=integer : 设置 上 传 文件 最 大 大 小 ， 以 MB 为 单位 。 此 指令 必须 小 
于 post_max_size 。 

5.upload_tmp_dir=string : 设置 上 传 文件 在 处 理 之 前 必须 存放 在 服务 器 的 临时 一 个 位 置 ， 
直到 文件 移动 到 最 终 目 的 地 为 止 。 

6.post max_size=integer : 确定 通过 POST 方法 可 以 接受 的 信息 的 最 大 大 小 ， 以 MB 为 
单位 。 

二 . $_FILES 数 组 


上 传 表单 的 HTML 


<form enctype="multipart/form-data" action="upload.php" method="post"> 

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> 上 传 文件 : <input type="file" | 
<input type="submit" value=" 上 传 " /> 

</form> 


= 








ENCTYPE="multipart/form-data"， 这 里 是 固定 写法 ， 否 则 文件 上 传 失败 
ACTION="upload.php“， 定 义 要 处 理 上 传 的 程序 文件 路 径 

METHOD="post"， 定 义 传 输 方式 为 POST， 一 般 情 况 下 Form 提 交 数 据 都 设置 为 POST 
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">， 这 是 一 个 隐藏 域 ， 
义 了 上 传 文件 的 大 小 上 限 ， 超 过 这 个 值 时 ， 上 传 失败 。 它 必须 定义 在 文件 上 传 域 的 前 面 . 


而 且 这 里 定义 的 值 不 能 超过 在 php.ini 文件 中 upload_max_filesize 设置 的 值 ,否则 没有 意 


义 了 . (注意 : MAX_FILE_SIZE 的 值 只 是 对 浏览 器 的 一 个 建议 ， 实 际 上 它 可 以 被 简单 的 
绕 过 。 因 此 不 要 把 对 浏览 器 的 限制 寄 希 望 于 该 值 。 实 际 上 ，PHPini 设 置 中 的 上 传 文件 最 
大 值 ， 是 不 会 失效 的 。 但 是 最 好 还 是 在 表单 中 加 上 MAX_FILE_SIZE， 因 为 它 可 以 避 

免 用 户 在 花 时 间 等 待 上 传 大 文件 之 后 才 发 现 该 文件 太 大 了 的 麻烦 。) 

<input type="file" name="userfile" />, 这 是 文件 上 传 域 ,Type 属 性 必须 设置 为 fle, 但 Name 属 性 
可 以 自 定义 ,这 个 值 会 在 代码 文件 中 使 用 . 

$_FILES 超级 全 局 变量 ， 它 储存 各 种 与 上 传 有 关 的 信息 ， 这 些 信 息 对 于 通过 PHP 脚本 

上 传 到 服务 器 的 文件 至 关 重 要 。 

1. 存 储 在 $_FILES["userfile"]["tmp_name"] 变量 中 的 值 就 是 文件 在 Web 服务 器 中 临时 存 

储 的 位 置 。 

2. 存 储 在 $_FILES["userfile"]["n ame] 变 量 中 的 值 就 是 用 户 系统 中 的 文件 名 称 。 

3. 存 储 在 $_FILES["userfile"]["s ize"] 变 量 中 的 值 就 是 文件 的 字 节 大 小 。 

4. 存 储 在 $_FILES["userfile"]["type] 变 量 中 的 值 就 是 文件 的 MIME 类 型 ， 例 如 : text/plain 

或 image/gif。 

5. 存 储 在 $_FILES["userfile"]["error"] 变 量 中 的 值 将 是 任何 与 文件 上 载 相关 的 错误 代码 。 

这 是 在 PHP4.2.0 中 增加 的 新 特性 。error 分 别提 供 了 一 些 数组 常量 : 0: 表 示 没 有 发 生 错误 ，1: 
表示 上 载 文件 的 大 小 超出 了 约定 值 。 文 件 大 小 的 最 大 值 是 PHP 配置 文件 中 指定 的 ， 该 指令 


是 upload_max filesize。2: 表 示 上 载 文件 大 小 超出 了 HTML 表单 的 MAX_FILE_SIZE 元 素 所 


指定 的 最 大 值 。3: 表 示 文 件 只 被 部 分 上 载 。4: 表 示 没 有 上 载 任何 文件 。 


<?php print_r($_FILES); ?> 


三 PHP 上 传 亟 数 

PHP 的 文件 系统 库 中 提供 了 大 量 文件 处 理 函 数 ， 除 此 之 外 ，PHP 还 提供 了 两 个 专门 用 
于 文件 上 传 过 程 的 函数 :is_uploaded _file() 和 move_uploaded file()。 

1. 确 定 是 否 上 传 文件 : is_uploaded file() 


<?php if (is_uploaded_file($_FILES["userfile"]["tmp_name"])) { echo ' 已 经 上 传 到 临时 文件 夹 '， 
} else { echo ' 失 败 '， 
> 


疾 二 


2. 移 动 上 传 文件 : move_uploaded file() 


<?php if (!move uploaded file($ FILES["userfile"]["tmp_name"],$_ FILES["userfile"]["name"] 
} ?> 





注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 


第 十 四 章 处 理 图 像 


学 习 要 点 : 
创建 图 像 
2. 简 单 小 案例 
在 PHP5 中 ， 动 态 图 象 的 处 理 要 比 以 前 容易 得 多 。PHP5 在 php.ini 文件 中 包含 了 GD 扩 
展 包 ， 只 需 去 掉 GD 扩展 包 的 相应 注释 就 可 以 正常 使 用 了 。PHP5 包含 的 GD 库 正 是 升级 的 
GD2 库 ， 其 中 包含 支持 丨 彩 图 像 处 理 的 一 些 有 用 的 JPG 功能 。 


一 般 生 成 的 图 形 ， 通 过 PHP 的 文档 格式 存放 ， 但 可 以 通过 HTML 的 图 片 插入 方式 SRC 


来 直接 获取 动态 图 形 。 比 如 ， 验 证 码 、 水 印 、 微 缩 图 等 。 
创建 图 像 

创建 图 像 的 一 般 流程 : 

们 . 设 定 标 头 ， 告 诉 浏览 器 你 要 生成 的 MIME 类 型 。 

2). 创 建 一 个 图 像 区 域 ， 以 后 的 操作 都 将 基于 此 图 像 区 域 。 

3). 在 空白 图 像 区 域 绘制 填充 背景 。 


4). 在 背景 上 绘制 图 形 轮 廊 输 入 文本 。 


<?php header('Content-Type: image/png'); ?> 


创建 一 个 空白 的 图 像 区 域 


<?php $im = imagecreatetruecolor(200,200); ?> 


在 空白 图 像 区 域 绘制 填充 背景 


<?php $blue = imagecolorallocate($im,9,102,255); 
imagefill($im,09,0,$blue); ?> 


在 背景 上 绘制 图 形 轮 廊 输 入 文本 


<?php $white = imagecolorallocate($im,255,255,255); 
imageline($im,0,90,200,200, $white); 
imageline($im,200,0,09,200,$white); 

imagestring($im, 5, 80, 20, "Mr.Lee", $white); ?> 


<?php 
imagepng($im); ?> 


清除 所 有 资源 


<?php 
imagedestroy($im); ?> 


其 他 页 面 调用 创建 的 图 形 


<img src="Demo4.php" alt="PHP 创建 的 图 片 " /> 


二 简单 小 案例 


简单 验证 码 


<?php header('Content-type: image/png'); for($Tmpa=0;$Tmpa<4;$Tmpa++){ $nmsg.=dechex(rand 
} $im = imagecreatetruecolor(75,25); $blue = imagecolorallocate($im,09,102,255); $white = 
imagefill($im,o0,0,$blue); 

imagestring($im,5,20,4,$nmsg, $white); 

imagepng($im); 

imagedestroy($im); ?> 


ER 
加 载 已 有 的 图 像 





<?php header('Content-Type:image/png'); define(' DIR ',dirname(__FILE ).'\\'); $im = i 
imagestring($im,3,5,5,'http://www.yc60.com', $white); 

imagepng ($im); 

imagedestroy($im); ?> 


二 一 i 
加 载 已 有 的 系统 字体 





<?php $text = iconv("gbk", "utf-8"," 李 炎 恢 "); $font = 'C:\WINDOWS\Fonts\SIMHEI.TTF'; 
imagettftext($im,20,0,30,30,$white, $font, $text); ?> 


<?php header('Content-type: image/png'); define(' DIR ',dirname(__ FILE ).'\\'); list($ 
imagecopyresampled($im2, $im, 0, 90, 0, 0, 

$new_width, $new_height, $width, $height); 

imagepng($im2); 

imagedestroy($im); 

Imagedestroy($im2); ?> 
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学 习 要 点 : 

1.Web 数据 库 概 述 

2.MySQL 的 操作 

3.MySQL 常用 函数 

4.SQL 语句 详解 

5.phpMyadmin 

一 .Web 数据 库 概述 

现在 ， 我 们 已 经 熟悉 了 PHP 的 基础 知识 ， 这 是 我 们 想 暂 时 离开 PHP 一 章 ， 来 重点 介绍 
一 下 关系 型 数据 库 ， 让 大 家 了 解数 据 库 比 文件 储存 的 有 点 。 这 些 优 点 包括 : 

1. 关 系 型 数据 库 比 普通 文件 的 数据 访问 速度 更 快 

2. 关 系 型 数据 库 更 容易 查阅 并 提取 满足 特定 条 件 的 数据 。 

3. 关 系 型 数据 库 更 具有 专门 的 内 置 机 制 处 理 并 发 访问 ， 作 为 程序 员 ， 不 需要 为 此 担心 。 
4. 关 系 型 数据 库 可 以 提供 对 数据 的 随即 访问 。 

5. 关 系 型 数据 库 具 有 内 置 的 权限 系统 。 

关系 数据 库 的 概念 

至 今 为 止 ， 关 系数 据 库 是 最 常用 的 数据 库 类 型 。 在 关系 代数 方面 ， 它 们 具有 很 好 的 理论 
基础 。 当 使 用 关系 数据 库 的 时 候 ， 并 不 需要 了 解 关系 理论 (这 是 一 件 好 事 ) ， 但 是 
理解 一 些 关 于 数据 库 的 基本 概念 。 

1) 表格 

关系 数据 库 由 关系 组 成 ， 这 些 关系 通常 称 为 表格 。 顾 名 思 义 ， 一 个 关系 就 是 一 个 数据 的 


表格 。 电 子 数据 表 就 是 一 种 表格 。 


一 :一 | 陈道明 0212324534 
0152343434 


2) 列 





表 中 的 每 一 列 都 有 惟一 的 名 称 ， 包 含 不 同 的 数据 。 此 外 ， 每 一 列 都 有 一 个 相关 的 数据 类 


型 。 
表 中 的 每 一 行 代表 一 个 客户 。 每 一 行 具有 相同 的 格式 ， 因 而 也 具有 相同 的 属性 。 行 也 成 
为 记录 。 
4) 值 
每 一 行 由 对 应 每 一 列 的 单个 值 组 成 。 每 个 值 必须 与 该 列 定 义 的 数据 类 型 相同 。 
5) 键 
每 一 条 数据 所 对 应 的 唯一 的 标识 。 
6) 模式 
数据 库 整 套 表格 的 完整 设计 成 为 数据 库 的 模式 。 
7) 关系 
外 键 标识 两 个 表格 数据 的 关系 。 
如 何 设计 Web 数据 库 
1) 考虑 要 建 模 的 实际 对 象 。 
2) 避免 保存 宛 余 数据 。 
3) 使 用 原子 列 值 (对 每 一 行 的 每 个 属性 只 存储 一 个 数据 。) 
4) 选择 有 意义 的 键 。 
5) 考虑 需要 询问 数据 库 的 问题 。 
6) 避免 多 个 空 属性 的 设计 


Web 数据 库 架 构 


浏览 器 和 Web 服务 器 之 间 的 通信 : 


Web 


浏览 如 服务 器 





浏览 器 和 PHP&MySQL 服务 器 之 间 的 通信 


浏览 器 服务 器 MYSQL 服务 器 
4 6 





1) 用 户 的 Web 浏览 器 发 出 HTTP 请 求 ， 请 求 特 定 Web 页 面 。 
2)Web 服务 器 收 到 .php 的 请 求 获取 该 文件 ， 并 将 它 传 到 PHP 引擎 ， 要 求 它 处 理 。 
3)PHP 引擎 开始 解析 脚本 。 脚 本 中 有 一 条 连接 数据 库 的 命令 ， 还 有 执行 一 个 查询 的 命令 。 
PHP 打开 通 向 MYSQL 数据 库 的 连接 ， 发 送 适 当 的 查询 。 
4)MYSQL 服务 器 接收 数据 库 查 询 并 处 理 。 将 结果 返回 到 PHP 引擎。 
5)PHP 以 你 去 哪 干 完成 脚本 运行 ， 通 常 ， 这 包括 将 查询 结果 格式 化 成 HTML 格式 。 然 
后 再 输出 HTML 返回 到 Web 服务 器 。 
6)Web 服务 器 将 HTML 发 送 到 浏览 器 。 
二 . MySQL 操作 
登录 到 MySQL 
1) 打 开 MySQL Command Line Client 
2) 输 入 root 的 设置 密码 
MySQL 常规 命令 
们 显示 当前 数据 库 的 版 本 号 和 日 期 。 
SELECT VERSION(),CURRENT_DATE(); 
2) 通 过 AS 关键 字 设 置 字段 名 。 
SELECT VERSION() AS version; /可 设置 中 文 ， 通 过 单 引号 
3) 通 过 SELECT 执行 返回 计算 结果 


SELECT (20+5)*4 


4) 通 过 多 行 实现 数据 库 的 使 用 者 和 日 期 
>SELECT 

>USER() 

>， 

>NOW() 

>; 

5) 通 过 一 行 显 示 数 据 库 使 用 者 和 日 期 
>SELECT USER(;SELECT NOW(); 

6) 命 令 的 取消 

>\c 

7)MySQL 窗口 的 退出 

>exit; 

MySQL 常用 数据 类 型 

整数 型 : TINYINT，SMALLINT ; INT ，BIGINT 
浮 点 型 : FLOAT ， DOUBLE ; DECIMAL(M,D) 
字符 型 : CHAR ，VARCHAR 

日 期 型 : DATETIME ，DATE ， TIMESTAMP 


备注 型 : TINYTEXT ，TEXT ，LONGTEXT 


日 期 型 


DATEIINME '0000-00-00 00:00:00' 
DATE '0000-00-00' 


TIMESTAMP | 00000000000000 
TIME '00:00:00， 
0000 
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au 
全 
et 
剑 字 


hu le 
一 


1844674407370955S1615 


整数 型 
关 型 | 守节 | 最 值 | 最 和 值 
FLOAT 4 |+1.175494351E-38 +-3.402823466E+38 


+- 十 - 
DOUBLE "| 2.2250738585072014E- | 1.7976931348623157E+ 
308 


它 的 取 值 范围 可 变 。 


MEDIUMTEXT 字符 最 大 长 度 16777215 个 字符 
LONGTEXT 字符 串 ， 最 大 长 度 4294967295 个 字符 
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MySQL 数据 库 操作 
1) 显 示 当 前 存在 的 数据 库 
>SHOW DATABASES; 
2) 选 择 你 所 需要 的 数据 库 
>USE guest; 
3) 查 看 当前 所 选择 的 数据 库 
>SELECT DATABASE(); 
4) 查 看 一 张 表 的 所 有 内 容 
>SELECT * FROM guest; // 可 以 先 通 过 SHOW TABLES; 来 查看 有 多 少 张 表 
5) 根 据 数据 库 设置 中 文 编码 
>SET NAMES gbk; //set names utf8; 
6) 创 建 一 个 数据 库 
>CREATE DATABASE book; 
7) 在 数据 库 里 创建 一 张 表 
>CREATE TABLE users ( 
>username VARCHAR(20), /NOT NULL 设置 不 允许 为 空 
>Sex CHAR(1), 
>birth DATETIME); 
8) 显 示 表 的 结构 
>DESCIRBE users; 
9) 给 表 插 入 一 条 数据 
>INSERT INTO users (username,sex,birth) VALUES (Lee','x', NOW()); 
10) 算 选 指定 的 数据 
> SELECT * FROM users WHERE username = 'Lee '; 
11) 修 改 指定 的 数据 
>UPDATE users SET sex = ' 男 ' WHERE username='Lee'; 


12) 删 除 指 定 的 数据 
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> DELETE FROM users WHERE username='Lee '; 

13) 按 指定 的 数据 排序 

> SELECT * FROM users ORDER BY birth DESC; // 正 序 
14) 删 除 指定 的 表 

>DROP TABLE users; 

15) 删 除 指 定 的 数据 库 


>DROP DATABASE booki; 


三 MySQL 常用 函数 


文本 函数 
从 列 的 值 中 返回 最 右边 的 x 个 字符 


从 存储 的 值 删除 开头 和 结尾 的 空格 





LOWER(column) 把 存储 的 字符 串 全 部 小 写 


SUBSTRING(column. start. | 从 column 中 返回 开始 start 的 length 
length) 个 字符 (索引 从 0 开始 ) 


把 储存 的 字符 串 用 MD5 加 密 
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数字 函数 


数 


FORMATO FORMAT(x.y) 返回 一 个 格式 化 后 的 小 数 


日 期 和 时 间 函 数 
用 法 








ETTETTDTR 
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人 FORMATO 和 TIME 入 


月 中 的 某 天 ， 两 位 


%W 周 日 名 称 Sunday~Saturday 








简写 的 周 日 名 称 Sun-Sat 


年 份 ， 两 位 


小 时 ，24 小 时 制 





四 ' SQL 语句 详解 
创建 一 个 班级 数据 库 school， 里 面包 含 一 张 班 级 表 grade， 包 含 编 号 (id)、 姓 名 (name)、 
邮件 (email)、 评 分 (point)、 注 册 日 期 (regdate)。 
mysql>CREATE DATABASE school; // 创 建 一 个 数据 库 
mysql> CREATE TABLE grade ( 


HUNSIGNED 表示 无 符号 ，TINYINT(2) 无 符号 整数 0-99，NOT NULL 表示 不 能 为 


空 ，AUTO_INCREMENT 表示 从 1 开始 没 增加 一 个 字段 ， 系 计 一 位 
-> id TINYINT(2) UNSIGNED NOT NULL AUTO_INCREMENT, 

-> name VARCHAR(20) NOT NULL， 

-> email VARCHAR(40), 

-> point TINYINT(3) UNSIGNED NOT NULL， 

-> regdate DATETIME NOT NULL， 

-> PRIMARY KEY (id) /表示 id 为 主键 ， 让 id 值 唯一 ， 不 得 重复 。 
>); 
2. 给 这 个 班级 表 grade 新 增 5-10 条 学 员 记 录 

mysql> INSERT INTO grade (name,email,point,regdate) VALUES 
(‘Lee',yc60.com@gmail.com',95, NOW!()); 

3. 查 看 班级 所 有 字段 的 记录 ， 查 看 班级 id,name,email 的 记录 
mysql> SELECT * FROM grade; 


mysql> SELECT id,name,email FROM grade; 


WHERE 表达 式 的 常用 运算 符 


大 于 或 等 


IS NOT NULL 


BETWEEN 在 范围 内 
NOT BETWEEN 不 在 范围 内 


指定 的 范围 


条 件 语句 不 为 真 





4. 姓 名 等 于 'Lee' 的 学 员 ， 成 绩 大 于 90 分 的 学 员 ， 邮 件 不 为 空 的 成 员 ，70-90 之 间 的 成 员 
mysql> SELECT * FROM grade WHERE name='Lee '; 

mysql> SELECT * FROM grade WHERE point>90; 

mysql> SELECT * FROM grade WHERE email IS NOT NULL; 

mysql> SELECT * FROM grade WHERE point BETWEEN 70 AND 90; 
mysql> SELECT * FROM grade WHERE point IN (95,82,78); 

5. 查 找 邮 件 使 用 163 的 学 员 ， 不 包含 yc60.com 字符 串 的 学 员 

mysql> SELECT * FROM grade WHERE email LIKE '"%163.com '; 

mysql> SELECT * FROM grade WHERE email NOT LIKE '%yc60.com%,, 
6. 按 照 学 员 注册 日 期 的 倒序 排序 ， 按 照 分 数 的 正 序 排 序 

mysql> SELECT * FROM grade ORDER BY regdate DESC; 

mysql> SELECT * FROM grade ORDER BY point ASC; 


7. 只 显示 前 三 条 学 员 的 数据 ， 从 第 3 条 数据 开始 显示 2 条 


mysql> SELECT * FROM grade LIMIT 3; 

mysql> SELECT * FROM grade LIMIT 2,2; 

8. 修 改姓 名 为 'Lee' 的 电子 邮件 

mysql> UPDATE grade SET email='yc60.com@163.com' WHERE name='Lee '; 
9. 删 除 编号 为 4 的 学 员 数 据 

mysql> DELETE FROM grade WHERE id=4; 


ee 


AVG() AVG(column) 返回 列 的 平均 值 
COUNTO COUNT(column) 统计 行 数 


MAX() MAX(column) 求 列 中 的 最 大 值 
MINO MIN(column) 求 列 中 的 最 小 值 
SUMO SUM(column) 求 列 中 的 和 





10. 过 一 遍 以 上 的 分 组 函数 


11. 检 查 这 个 表 的 信息 
mysql> SHOW TABLE STATUS \G; 
12. 优 化 一 张 表 
mysql> OPTIMIZE TABLE grade; 
五 PhpMyAdmin 
phpMyAdmin( 简 称 PMA) 是 一 个 用 PHP 编写 的 ， 可 以 通过 互联 网 在 线 控 制 和 操作 
MySQL。 他 是 众多 MySQL 管理 员 和 网 站 管理 员 的 首选 数据 库 维护 工具 ， 通 过 phpMyAdmin 
可 以 完全 对 MySQL 数据 库 进行 操作 。 
创建 数据 库 scholl 
创建 一 个 数据 库 -> 选择 utf8 字符 集 
导出 另 一 个 数据 库 SQL 
1. 选 择 另 一 个 数据 库 -> 导 出 


2. 选 择 需 要 导出 的 表 -> 全 选 


3. 选 择 Add DROP TABLE / DROP VIEW (基本 表 一 旦 删除 ， 表 中 的 数据 以 及 相应 建立 
的 索引 和 视图 都 将 自动 被 删除 ) 

4. 选 择 另 存 为 文件 

5. 选 择 执行 ， 保 存 sql 文件 

导入 数据 库 

1. 选 择 被 导入 的 数据 库 


2. 选 择 Import( 导 入 )， 选 择 sql 文件 


3. 执 行 即 可 

删除 表 

1. 可 以 直接 选择 操作 中 的 关 ， 然 后 确认 即 可 删除 数据 表 . 

2. 也 可 以 选择 复 选 按钮 万 .然后 选择 选中 项 : [下 # 殴 四， 选择 删除 ， 执 行 即 可 
重建 表 


1. 找 到 sq| 文件 中 的 刚才 输出 的 建 表 语句 . 
2. 复 制 建 表 语 句 

3. 然 后 选择 sql， 选 择 粘贴 ， 执 行 即 可 
修复 数据 表 

1. 选 择 要 修复 的 表 

2. 在 选中 项 中 ， 选 择 修复 表 , 即 可 
优化 数据 表 

1. 选 择 要 优化 的 表 

2. 在 选中 项 中 ， 选 择优 化 表 ， 即 可 
修改 ， 删 除 ， 插 入 表 记 录 
执行 SQL 语句 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 
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学 习 要 点 : 
1.PHP 连接 到 MySQL 
2. 增 删改 查 
3. 其 他 常用 函数 
如 果 你 已 经 具有 了 使 用 PHP、SQL 和 MySQL 的 丰富 经 验 ， 现 在 就 可 以 把 所 有 这 些 技术 
组 合 在 一 起 。PHP 与 MySQL 之 间 稳 固 的 集成 只 是 众多 程序 员 采 纳 它 的 一 个 原因 ， 还 有 一 个 
原因 就 是 ， 它 如 此 的 简单 方便 。 
. PHP 连 接 到 MySQL 
这 里 ， 我 们 全 面 采 用 UTF-8 编码 。 
设置 Zend Stduio 的 编码 : Window -> Preferences -> Workspace 


标 头 设置 ， 让 火狐 和 IE 保持 编码 统一 : 


<?php header('Content-Type:text/html; charset=utf-8'); ?> 


连接 MySQL 


<?php $conn = @mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die(' 数 据 库 连 接 失 败 ! 错误 信息 :' 
国 守 = 一 


数据 库 连 接 参 数 ， 可 以 用 常量 存储 ， 这 样 就 不 能 修改 ， 更 加 安全 。 





<?php define('DB_USER', 'root'); define('DB_PASSWORD'，'yangfan' ); define('DB_HOST','localh 
和 
选择 你 所 需要 的 数据 库 





<?php 
@mysql_select_db(DB_NAME) or die(' 数 据 库 找 不 到 ! 错误 信息 : ' .mysql_error()); ?> 





品 


及 置 字 符 集 ， 如 果 是 GBK， 直 接 设 置 SET NAMES GBK 即 可 


<?php 
@mysql_query('SET NAMES UTF8') or die(' 字 符 集 设置 错误 ' ) ; ?> 


获取 记录 集 
<?php $query = "SELECT * FROM grade"; $result = @mysql query($query) or die('SQL 语 名 有 误 ! 
1 | 


输出 一 条 记录 








<?php print_r(mysql_fetch_array($result,MYSQL ASSOC)); ?> 


释放 结果 集资 源 


<?php mysql_free_result($result); ?> 


关闭 数据 库 

<?php mysql_close($conn); ?> 
二 增删 改 查 

新 增 数据 


<?php $query = "INSERT INTO grade (name,email,point,regdate) VALUE 
(' 李 炎 恢 ', 'yc60.com@gmail.com',，,NOW())"; 
@mysql_query($query) or die(' 添 加 数据 出 错 :'.mysql_error()); ?> 


修改 数据 


<?php $query = "UPDATE grade SET name=' 小 可 爱 ' WHERE id=6"; 
@mysql_query($query) or die(' 修 改 出 错 : '.mysql_error()); ?> 


删除 数据 


<?php $query = "DELETE FROM grade WHERE id=6"; 
@mysql_query($query) or die( "删除 错误 : '.mysql_error()); ?> 


显示 数据 


<?php $query = "SELECT id,name,email,point FROM grade"; $result = @mysql_ query($query) or 
} ?> 


到 二 


三 :其 他 常用 函数 





mysql_fetch_row() : 从 结果 集中 取得 一 行 作为 枚 举 数组 


mysql_fetch_assoc() : 从 结果 集中 取得 一 行 作为 关联 数组 

mysql_fetch_array() : 从 结果 集中 取得 一 行 作为 关联 数组 ， 或 数字 数组 ， 或 二 者 兼 有 
mysql_fetch_lengths () : 取得 结果 集中 每 个 输出 的 长 度 

mysql field_name() : 取得 结果 中 指定 字段 的 字段 名 

mysql_num_rows() : 取得 结果 集中 行 的 数目 

mysql_num_fields() : 取得 结果 集中 字段 的 数目 

mysql_get_client_info() : 取得 MySQL 客户 端 信息 

mysql_get_host info() : 取得 MySQL 主机 信息 


mysql_get_proto _info() : 取得 MySQL 协议 信息 


mysql_get_server info() : 取得 MySQL 服务 器 信息 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交 流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 


第 十 七 章 面向 对 象 基 础 


学 习 要 点 : 

1. 什 么 是 面向 对 象 

2.OOP 的 特点 

3. 关 键 的 OOP 概念 

4. 创 建 OOP 

许多 语言 本 身 就 是 面向 对 象 (OOP) 的 ， 而 PHP 用 了 几 年 才 引 入 了 这 类 功能 。 面 向 对 

象 的 诞生 是 开发 范 型 一 次 的 重大 改变 ， 编 程 的 注意 力 重新 从 应 用 程序 的 逻辑 回 到 其 数据 上 

来 。 换 名 话说 ，OOP 将 焦点 从 编程 的 过 程 性 事件 转向 最 终 建 模 的 盖 实 实体 。 这 使 得 应 用 程 
序 更 接近 于 我 们 周围 的 现实 世界 。 

一 :什么 是 面向 对 象 

面向 过 程 

这 就 好 比 你 是 公司 的 一 名 员工 ， 今 天 有 个 任务 要 在 公司 组 装 一 批 电 脑 。 那 么 你 就 开始 条 

购 、 讨 价 还 价 、 运 输 回 公司 、 开 始 组 装 、 布 线 网 络 、 调 试 机 器 、 完 成 。 也 就 是 说 ， 面 向 过 程 
就 是 具体 化 的 实现 ， 细 节 明 确 。 

面向 对 象 

这 就 好 像 你 是 公司 的 总 裁 ， 你 布置 给 一 名 员工 一 个 组 装 一 批 电 脑 的 任务 。 完 毕 。 也 就 是 

说 ， 面 向 对 象 就 是 抽象 化 的 执行 ， 具 体 还 是 由 那 名 员工 来 完成 。 而 细节 方面 ， 总 裁 不 需要 去 
考虑 。 这 样 的 好 处 是 显而易见 的 ， 在 有 管理 高 层 的 公司 可 以 协调 作业 ， 而 没有 管理 高 层 的 公 
司 ， 只 有 一 些 具体 实现 功能 的 员工 ， 会 乱 做 一 团 。 

二 .OOP 的 特点 

封装 

隐藏 对 象 的 属性 和 实现 细节 ， 仅 对 外 公开 接口 ,控制 在 程序 中 属性 的 读 和 修改 的 访问 级 

别 ; 将 抽象 得 到 的 数据 和 行为 (或 功能 ) 相 结合 ， 形 成 一 个 有 机 的 整体 ， 也 就 是 将 数据 与 


操作 数据 的 源 代 码 进 行 有 机 的 结合 ， 形 成 “类 "”， 其 中 数据 和 函数 都 是 类 的 成 员 。 


继承 

继承 是 从 一 个 基 类 得 到 一 个 或 多 个 类 的 机 制 。 

继承 自 另 一 个 类 的 类 被 称 为 该 类 的 子 类 。 这 种 关系 通常 用 父亲 和 孩子 来 比喻 。 子 类 将 继 

承 父 类 的 特性 。 这 些 特性 由 属性 和 方法 组 成 。 子 类 可 以 增加 父 类 之 外 的 新 功能 ， 因 此 子 类 也 
被 称 为 父 类 的 “扩展 ”。 

多 态 

多 态 是 指 OOP 能 够 根据 使 用 类 的 上 下 文 来 重新 定义 或 改变 类 的 性 质 或 行为 ， 或 者 说 接 

口 的 多 种 不 同 的 实现 方式 即 为 多 态 。 把 不 同 的 子 类 对 象 都 当 作 父 类 来 看 ， 可 以 屏蔽 不 同 子 类 
对 象 之 间 的 差异 ， 写 出 通用 的 代码 ， 做 出 通用 的 编程 ， 以 适应 需求 的 不 断 变 化 。 

三 .关键 的 OOP 概念 

类 (class) 

类 是 对 某 个 对 象 的 定义 。 它 包含 有 关 对 象 动作 方式 的 信息 ， 包 括 它 的 名 称 、 方 法 、 属 性 

和 事件 。 实 际 上 它 本 身 并 不 是 对 象 ， 因 为 它 不 存在 于 内 存 中 。 当 引用 类 的 代码 运行 时 ， 类 的 
一 个 新 的 实例 ， 即 对 象 ， 就 在 内 存 中 创建 了 。 虽 然 只 有 一 个 类 ， 但 能 从 这 个 类 在 内 存 中 创建 
多 个 相同 类 型 的 对 象 。 

对 象 (object ) 

对 象 是 一 件 事 、 一 个 实体 、 一 个 名 词 ， 可 以 获得 的 东西 ， 可 以 想象 有 自己 的 标识 的 任何 
东西 。 对 象 是 类 的 实例 化 。 一 些 对 象 是 活 的 ， 一 些 对 象 不 是 。 

比如 这 辆 汽车 、 这 个 人 、 这 间 房 子 、 这 张 桌子 、 这 株 植 物 、 这 张 支票 、 这 件 雨衣 。 概 

括 来 说 就 是 : 一 切 强 对象 。 

例如 : 类 是 对 象 的 抽象 定义 ， 说 白 了 ， 如 果 这 个 对 象 是 电脑 ， 类 可 以 创建 出 许多 对 象 ， 


类 可 以 生成 很 多 电脑 ， 再 白 一 点 ， 类 可 以 当成 一 个 电脑 生产 厂 ， 可 以 生成 出 很 多 很 多 台电 


2 
&\ 
O 


字段 (filed) 
字段 是 用 于 描述 类 的 某 方面 的 性 质 ， 它 与 一 般 的 PHP 变量 非常 相似 ， 只 是 有 一 些 细微 
的 差别 。 


例如 : 电脑 品牌 ， 电 脑 的 型 号 等 特性 。 


属性 (attribute) 

通过 方法 来 访问 和 操作 字段 ， 一 方面 可 以 保护 字段 ， 同 时 还 允许 访问 公共 字段 一 样 访问 
数据 。 

例如 : 获取 电脑 品牌 ， 设 置 电脑 品牌 等 操作 。 

方法 (method ) 

方法 与 函数 非常 相似 ， 只 不 过 方法 是 用 来 定义 类 的 行为 。 与 函数 一 样 ， 方 法 可 以 接受 输 
入 参数 ， 可 以 向 调用 者 返回 一 个 值 。 

例如 : 打开 电脑 ， 输 入 文本 ， 运 行程 序 。 

四 ' 创建 OOP 


类 的 创建 : 


class Computer { // 类 的 字段 (成 员 ) 
// 类 的 方法 
} 


对 象 的 声明 : 
$computer = new Computer(); 
new 标识 符 是 为 了 在 内 测 中 创建 一 个 对 得 (实例) ， 而 Computer() 就 是 那个 类 所 生 
成 的 实例 。 
$computer 是 一 个 变量 ， 而 且 又 是 生成 实例 的 引用 。 


有 时 ， 你 可 能 需要 创建 多 个 对 象 。 


$computer2 = new Computer(); 


栈 内 存 


$computer new Compnuter0: 实例 1 


$computer2 


new Compnuter0: ”实例 2 





使 用 var_dump() 函 数 可 以 打印 变量 的 相关 信息 。 


字段 (成 员 ) 的 添加 : 


class Computer { 
// 类 的 字段 (成 员 ) 
public $_name = ' 联 想 120'， 
public $ model = 'LX'; 


public $_name = ' 联 想 120' 


a) public 是 修饰 符 ， 表 示 这 是 一 个 公共 字段 ， 可 以 通过 外 部 直接 访问 。 


echo $computer->_name; 
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3. 设 置 字段 


$computer->_name = 'IBM110°'; 


方法 的 创建 


class Computer { // 类 的 方法 
function run() { echo ' 我 成 功 的 运行 了 1 '， 
} 
执行 方法 


$computer->run(); 


也 可 以 在 方法 添加 一 些 参数 ， 执 行 的 时 候 ， 传 入 这 些 参数 。 


class Computer { // 类 的 方法 
function run($_what) { echo $_what . ' 成 功 的 运行 了 !'， 


} $computer = new Computer (); $computer->run(' 电 脑 ' ) ; 


构造 方法 
所 谓 构造 方法 ， 也 是 方法 ， 只 不 过 是 一 种 特殊 的 方法 。 而 方法 名 必须 和 类 名 一 致 ， 


并 且 不 需要 像 普通 方法 一 样 ， 必 须 通 过 调用 才能 执行 ， 只 需要 实例 化 即 完成 调用 过 程 。 


一 般 来 说 ， 构 造 方法 总 是 在 做 一 些 初 始 化 的 工作 。 


class Computer { // 构 造 方法 
function Computer() { echo ' 我 是 构造 方法 1'， 


} 
} new Computer (); // 这 样 即 完成 了 调用 


在 PHP5 我 们 可 以 通过 ”construct 的 内 置 方法 来 识别 构造 方法 ， 而 不 用 再 需要 和 
类 名 相同 了 。 


class Computer { // 构 造 方法 
function __construct() { echo ' 我 是 构造 方法 1!'， 


} 


相对 应 构造 方法 ， 还 有 一 种 内 置 的 方法 是 析 构 方法 ， 它 的 用 途 在 整个 类 使 用 完毕 都 
执行 。 一 般 可 用 于 清理 内 存 中 对 象 (脚本 执行 完毕 的 时 候 会 自动 清理 )。 而 如 果 有 脚本 执 
行 完毕 后 并 没有 清理 的 ， 比 如 数据 库 数 据 等 ， 就 有 必要 使 用 析 构 方法 。 


class Computer { // 析 构 方 法 
function destruct() { echo ' 我 是 析 构 方法 '， 
} 


cm 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交 流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 0° 


第 十 八 草 面向 对 象 的 特性 


学 习 要 点 : 
1.OOP 的 封装 
2.OOP 的 继承 
3.OOP 的 多 态 
面向 对 象 的 三 个 主要 特性 是 封装 、 继 承 和 多 态 。 
一 OOP 的 封装 
隐藏 对 象 的 字段 和 实现 细节 ， 仅 对 外 公开 接口 ,控制 在 程序 中 字段 的 读 和 修改 的 访问 级 
别 ; 将 抽象 得 到 的 数据 和 行为 〈 或 功能 ) 相 结合 ， 形 成 一 个 有 机 的 整体 ， 也 就 是 将 数据 与 
操作 数据 的 源 代 码 进 行 有 机 的 结合 ， 形 成 类”， 其 中 数据 和 函数 都 是 类 的 成 员 。 
字段 的 作用 域 
1.public 公共 的 (类 外 可 以 访问 ) 
2.private 私有 的 (类 内 可 以 访问 ) 
3.protected 受 保护 的 (类 内 和 子 类 可 以 访问 ， 类 外 不 可 访问 ) 
创建 使 用 了 私有 的 字段 ， 这 样 外 部 就 无 法 访问 了 
class Computer { // 类 的 字段 (成 员 ) 


private $_name = ' 联 想 120'; private $ model = 'LX'; 
} 


通过 一 个 公共 方法 作为 入 口 ， 访 问 私 有 字段 ， 而 必须 使 用 $this 关 键 字 。 


class Computer { // 类 的 字段 (成 员 ) 
private $_name = ' 联 想 120'; private $_model = 'LX'; // 通 过 公共 方法 来 访问 私有 字段 
function run() { echo $this->_name; 


} $computer->run (); 
属性 操作 (私有 字段 的 赋值 与 取 值 ) 
可 以 设计 两 个 公共 方法 ， 一 个 方法 为 setName()， 用 于 赋值 ; 一 个 方法 为 getName()， 


用 于 取 值 。 


class Computer { // 类 的 字段 (成 员 ) 
private $_name; private $_model; // 赋 值 
function SetName($_name) { $this->_name = $_name; 
}// 取 值 
function getName() { return $this->_name; 


} $computer = new Computer (); $computer->setName ( 'IBM' ); echo $computer->getName (); 
了 一 | 


如 果 有 十 个 字段 那么 就 必须 要 二 十 个 方法 才能 够 赋值 和 取 值 ， 那 么 有 没有 更 简便 的 方法 





呢 ? PHP 内 置 两 个 方法 (拦截 器 ) 专 门 用 于 取 值 与 赋值 : set() ， get() 。 


class Computer { // 类 的 字段 (成 员 ) 
private $_name; private $_model; // 所 有 字段 的 赋值 都 在 这 里 进行 
function set($ key, $ value) { $this->$ key = $_ value; 
} // 所 有 字段 的 取 值 都 在 这 里 进行 
function _ get($ key) { return $this->$ key; 





} $computer = new Computer (); $computer-> model = 'LX'; echo $computer-> model; 


方法 私有 : 有 些 使 用 类 里 面 的 方法 并 不 需要 对 外 公开 ， 只 是 里 面 运作 的 一 部 分 ， 这 个 时 


候 可 以 将 方法 也 封装 起 来 。 


class Computer { // 类 的 字段 (成 员 ) 
private $_name; private $_model; // 私 有 方法 
private function getEcho() { echo ' 我 是 私有 化 的 方法 '， 
} // 公 共 方 法 一 般 是 对 外 的 入 口 
public function run() { $this->getEcho (); 


} $computer = new Computer (); $computer->run (); 


建议 : 方法 前 面 如 果 没 有 修饰 符 ， 那 么 就 是 外 部 可 访问 的 公共 方法 ， 但 为 了 让 程序 更 加 
的 清晰 ， 建 议 在 前 面 加 上 public。 

常量 (constant ) 

在 类 中 可 以 定义 常量 ， 用 来 表示 不 会 改变 的 值 。 对 于 从 该 类 实例 化 的 任何 对 象 来 说 ， 党 


量 值 在 这 些 对 象 的 整个 生命 周期 中 都 保持 不 变 。 


class Computer { const PI = 3.1415926 
} echo Computer::PI; 


有 了 时候， 可 能 需要 创建 供 所 有 类 实例 共享 的 字段 和 方法 ， 这 些 字段 和 方法 与 所 有 的 类 实 


例 有 关 ， 但 不 能 由 任何 特定 对 象 调用 。 


class Computer { public static $ count = 0; 
} echo Computer::$ count; 


一 般 来 说 ， 必 须 将 字段 做 成 私有 化 。 所 以 可 能 需要 这 么 做 : 


class Computer { private static $_count = 0; public static function setRun() { 
self::$ count ++; 
} public static function getRun() { return self::$ count; 


} 


Computer::setRun (); echo Computer::getRun (); 


Instanceof 关 键 字 
PHP5 有 一 个 instanceof 关 键 字 ， 使 用 这 个 关键 字 可 以 确定 一 个 对 象 是 类 的 实例 、 类 的 
子 类 ， 还 是 实现 了 某 个 特定 接口 ， 并 进行 相应 的 操作 。 


class Computer { 


} $computer = new Computer (); echo ($computer instanceof Computer); 


二 . OOP 继 承 

继承 是 从 一 个 基 类 得 到 一 个 或 多 个 类 的 机 制 。 

继承 自 另 一 个 类 的 类 被 称 为 该 类 的 子 类 。 这 种 关系 通常 用 父 类 和 孩子 来 比喻 。 子 类 将 继 

承 父 类 的 特性 。 这 些 特性 由 属性 和 方法 组 成 。 子 类 可 以 增加 父 类 之 外 的 新 功能 ， 因 此 子 类 也 
被 称 为 父 类 的 “扩展 ”。 

在 PHP 中 ， 类 继承 通过 extends 关 键 字 实现 。 继 承 自 其 他 类 的 类 成 为 子 类 或 派生 类 ， 子 


类 所 继承 的 类 成 为 父 类 或 基 类 。(PHP 只 支持 单 继承 ，PHP 不 支持 方法 重 载 ) 。 


class Computer { private $_name = ' 联 想 120'; private function _get($ key) { return $this- 
} public function run() { echo ' 我 是 父 类 '， 


} class NoteBookComputer extends Computer { 
} $notebookcomputer = new NoteBookComputer (); $notebookcomputer->run (); echo $notebookc 


a | 
字段 和 方法 的 重 写 (和 履 盖 ) 





有 些 时 候 ， 并 不 是 特别 需要 父 类 的 字段 和 方法 ， 那 么 可 以 通过 子 类 的 重 写 来 修改 父 类 的 


字段 和 方法 。 


class Computer { public $_name = ' 联 想 120'; protected function run() { echo ' 我 是 父 类 '， 
} class NoteBookComputer extends Computer { public $ name = 'IBM'; public function run() 
} 
} 
| 


a 








子 类 调用 父 类 的 字段 或 方法 
为 了 安全 ， 我 们 一 般 将 父 类 的 方法 封装 了 起 来 ， 这 样 ， 外 部 就 无 法 调用 ， 只 能 被 继承 它 
的 子 类 所 看 到 。 这 个 时 候 ， 就 需要 通过 子 类 操作 来 调用 父 类 了 。 


class Computer { protected $_name = ' 联 想 120'; protected function run() { echo ' 我 是 父 类 '， 


} class NoteBookComputer extends Computer { public function getName() { echo $this->_name 
} public function getRun() { echo $this->run (); 





通过 重 写 调用 父 类 的 方法 
有 的 时 候 ， 我 们 需要 通过 重 写 的 方法 里 能 够 调用 父 类 的 方法 内 容 ， 这 个 时 候 就 必须 使 用 
语法 : 父 类 名 :: 方 法 () 或 者 parent:: 方 法 () 即 可 调用 。 


class Computer { protected function run() { echo ' 我 是 父 类 '， 


} class NoteBookComputer extends Computer { public function run() { echo Computer::run () 
} 
} 
4 
final 关 键 字 可 以 防止 类 被 继承 ， 有 些 时 候 只 想 做 个 独立 的 类 ， 不 想 被 其 他 类 继承 使 用 ， 


那么 就 必须 使 用 这 个 关键 字 。 建 议 只 要 是 单独 的 类 ， 都 加 上 这 个 关键 字 。 


final class Computer { // 无 法 继承 的 类 
final public function run() { 
】 // 无 法 被 继承 的 方法 
} class NoteBookComputer extends Computer { // 会 报错 


} 


抽象 类 和 方法 (abstract ) 

抽象 方法 很 特殊 ， 只 在 父 类 中 声明 ， 但 在 子 类 中 实现 。 只 有 声明 为 abstract 的 类 可 以 声 
明 抽 象 方法 。 

规则 : 


1. 抽 和 象 类 不 能 被 实例 化 ， 只 能 被 继承 。 


2. 抽 象 方法 必须 被 子 类 方法 重 写 。 


abstract class Computer { abstract function run() 
} final class NotebookComputer extends Computer { public function run() { echo ' 我 实现 了 '; 


} 
} 
了 一 





接口 (interface ) 

接口 定义 了 实现 某 种 服务 的 一 般 规范 ， 声 明了 所 需 的 函数 和 常量 ， 但 不 指定 如 何 实 现 。 

之 所 以 不 给 出 实现 的 细节 ， 是 因为 不 同 的 实体 可 能 需要 用 不 同 的 方式 来 实现 公共 的 方法 定 
义 。 关 键 是 要 建立 必须 实现 的 一 组 一 般 原则 ， 只 要 满足 了 这 些 原则 才能 说 实现 了 这 个 接口 。 
规则 : 

1. 类 全 部 为 抽象 方法 (不 需要 声明 abstract) 

2. 接 口 抽 象 方法 必须 是 public 


3. 成 员 (字段 ) 必须 是 常量 


interface Computer { const NAME = ' 联 想 120'; public function run(); 
} final class NotebookComputer implements Computer { public function run() { echo “实现 了 韦 


} $notebookcomputer = new NoteBookComputer (); $notebookcomputer->run (); echo Computer:: 
= 


子 类 可 以 实现 多 个 接口 





interface Computer { const NAME = “' 联 想 120'; public function run(); 
} interface Notebook { public function book(); 


} final class NotebookComputer implements Computer, Notebook { public function run() { ec 
} public function book() { echo ' 实 现 了 接口 的 方法 '， 





多 态 是 指 OOP 能 够 根据 使 用 类 的 上 下 文 来 重新 定义 或 改变 类 的 性 质 或 行为 ， 或 者 说 接 
口 的 多 种 不 同 的 实现 方式 即 为 多 态 。 把 不 同 的 子 类 对 象 都 当 作 父 类 来 看 ， 可 以 屏蔽 不 同 子 类 
对 象 之 间 的 差异 ， 写 出 通用 的 代码 ， 做 出 通用 的 编程 ， 以 适应 需求 的 不 断 变化 。 


interface Computer { public function version(); public function work(); 
} class NotebookComputer implements Computer { public function version() { echo ' 联 想 120'; 
} public function work() { echo ' 笔 记 本 正在 随时 携带 运行 1 '， 


} class desktopComputer implements Computer { public function version() { echo 'IBM',; 
} public function work() { echo ' 人 台式 电脑 正在 工作 站 运行 1 '， 


} class Person { public function run($type) { $type->version (); $type->work (); 


} $person = new Person (); $desktopcomputer = new desktopComputer (); $notebookcomputer = 


| 有 | 








第 十 九 章 面向 对 象 的 工具 


学 习 要 点 : 

1.OOP 的 魔术 方法 

2. 类 函数 和 对 象 函 数 

3.OOP 的 反射 API 

PHP 通 过 类 和 方法 等 语言 结构 支持 面向 对 象 编程 。 同 时 也 通过 对 象 相关 的 函数 和 

内 置 类 为 面向 对 象 提 供 广泛 支持 。 

一 . OOP 的 魔术 方法 

PHP 引 入 了 autoload() 内 置 方法 来 自动 包含 类 文件 。autoload() 应 该 被 写成 单个 参 

数 的 方法 。 当 PHP 引 擎 遇 到 试图 实例 化 未 知 类 的 操作 时 ， 会 调用 _autoload() 方 法 ， 并 将 类 


名 当 作 字符 串 参 数 传递 给 它 。 


function __autoload($ className) { require $ className . '.class.php'; 
} $demo = new Computer (); 


PHP 采 用 了 __call() 内 置 方 法 来 屏蔽 对 象 调 用 方法 时 产生 的 错误 。 当 对 象 调 用 一 个 不 存 
在 的 方法 时 ， 会 自动 调用 _call() 方 法 。 


private function _ call($ methodName,$args) { echo $_methodName.' 方 法 不 存在 '; print_r($args 
}】 $computer->go( ' 我 '，1，' 知 道 '); 





PHP 使 用 toString() 内 置 方法 来 打印 对 象 的 引用 。 没 有 使 用 toString() 的 对 象 是 产生 


一 个 错误 ， 当 打印 对 象 的 时 候 会 自动 调用 _toString() 方 法 。 


class Computer { private function _ toString() { return ' 打 印 对 象 '， 


} echo new Computer (); 


PHP 可 以 在 类 中 定义 一 个 _clone() 内 置 方法 来 调整 对 象 的 克隆 行为 。 当 一 个 对 象 被 克 


隆 的 时 候 自动 执行 clone() 方 法 ， 而 复制 的 对 象 可 以 在 其 方法 体内 进行 调整 。 


class Computer { public $ name; public function _ clone() { $this->_name = 'ibm'; 


} $computer1 = new Computer (); $computer1->_name = 'dell'; $computer2 = clone $computer1 


4 
二 . 类 函数 和 对 象 函 数 








PHP 提 供 了 一 系列 强大 的 函数 来 检测 类 和 对 象 。 以 便 在 第 三 方 系统 ， 运 行 时 知道 正在 
使 用 的 是 哪个 。 
1.class_exists() 函 数 接受 表示 类 的 字符 串 ， 检 查 并 返回 布尔 值 。 如 果 类 存在 ， 返 回 true， 


否则 返回 false。 


echo class_ exists('Computer'); 


2.get_class() 函 数 获取 对 象 的 类 名 ， 如 果 不 是 对 象 ， 则 返回 false。 


echo get_class($computer ) 


3.get_class_methods() 函 数 获取 类 中 的 方法 (公共 的 )， 以 数组 的 形式 返回 出 来 。 


print_r(get_class_methods($computer ) ) ; 


4.get class _vars() 函 数 获取 类 中 的 字段 (公共 的 )， 以 数组 的 形式 返回 出 来 


print_r(get_class_vars('Computer')); 


5.get_parent_class() 函 数 获 取 子 类 的 父 类 ， 如 果 没 有 返回 false。 


echo get_parent_class('NoteComputer'); 


6.interface_exists() 函 数 确定 接口 是 否 存 在 ， 如 果 存 在 返回 true， 和 否则 返回 false。 


echo interface _ exists('Computer'); 


7.is_a() 函 数 确定 对 象 是 否 是 类 或 者 是 否 是 这 类 的 父 类 时 ， 返 回 ture， 否 则 返回 false 。 


echo is_a($computer,'Computer'); 


8.is_subclass_of() 部 数 确定 对 象 是 否 是 类 的 子 类 ， 是 返回 ture， 否 则 返回 false。 


echo is_subclass_of($notecomputer，'Computer ' ) ; 


9.method_ exists() 函 数 确定 对 象 的 方法 是 否 存在 ， 是 返回 ture， 和 否则 返回 false。 


echo method_exists($computer,'_run'); 


三 . OOP 的 反射 API 

PHP5 的 类 和 对 象 吕 数 并 没有 告诉 我 们 类 内 部 的 所 有 一 切 ， 而 只 是 报告 了 它们 的 公共 成 

员 。 要 充分 了 解 一 个 类 ， 需 要 知道 其 私有 成 员 和 保护 成 员 ， 还 要 知道 其 方法 所 期 望 的 参数 。 
对 此 ， 使 用 反射 API 。 


1. 获 得 反射 API 的 转 储 信息 


$rc = new ReflectionClass('Computer'); 
Reflection: :export($rc); 


2. 获 得 PHP 内 置 的 类 库 的 信息 


Reflection: :export(new ReflectionClass('Reflection')); 


3. 获 取 类 里 的 某 个 元 素 
$_rc = new ReflectionClass('Computer'); echo $_rc->getFileName(); echo $_rc->getName()， 
Resesssesesaeseeesesessltd 


注 : 文章 出 自 李 炎 恢 PHP 视 频 教程 ， 本 文 仅 限 交流 使 用 ， 不 得 用 于 商业 用 途 ， 否 则 后 果 自 
负 o 


